<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />



  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico?v=5.1.4">







  <meta name="keywords" content="Hexo, NexT" />










<meta name="description" content="I will be strong enough to make you feel bad">
<meta property="og:type" content="website">
<meta property="og:title" content="Sivan">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Sivan">
<meta property="og:description" content="I will be strong enough to make you feel bad">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Sivan">
<meta name="twitter:description" content="I will be strong enough to make you feel bad">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/"/>





  <title>Sivan</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  
	
  
	<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
  
  
  <div class="container sidebar-position-left 
  page-home">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Sivan</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off"
             placeholder="搜索..." spellcheck="false"
             type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/04/Hexo+Github 搭建属于自己的博客（进阶）NexT主题/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Sivan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Sivan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/04/Hexo+Github 搭建属于自己的博客（进阶）NexT主题/" itemprop="url">Hexo+Github 搭建属于自己的博客（进阶）NexT主题</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-04T21:46:25+08:00">
                2018-05-04
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/博客搭建/" itemprop="url" rel="index">
                    <span itemprop="name">博客搭建</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  1,277 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  6 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="主题安装"><a href="#主题安装" class="headerlink" title="主题安装"></a>主题安装</h1><h3 id="安装NexT"><a href="#安装NexT" class="headerlink" title="安装NexT"></a>安装NexT</h3><p>在站点目录下（hexo），输入命令：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git clone https://github.com/iissnan/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure>
<h3 id="启用主题"><a href="#启用主题" class="headerlink" title="启用主题"></a>启用主题</h3><p>在站点目录中（blog），打开配置文件_config.yml，修改<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">theme：next</span><br></pre></td></tr></table></figure></p>
<h3 id="验证主题"><a href="#验证主题" class="headerlink" title="验证主题"></a>验证主题</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo s</span><br></pre></td></tr></table></figure>
<h1 id="主题设定"><a href="#主题设定" class="headerlink" title="主题设定"></a>主题设定</h1><p>以下所有设置注意格式</p>
<h3 id="NexT主题设定"><a href="#NexT主题设定" class="headerlink" title="NexT主题设定"></a>NexT主题设定</h3><p>可以在next主题目录下的_config.yml文件中修改</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># Schemes</span><br><span class="line">scheme: Muse</span><br><span class="line">#scheme: Mist</span><br><span class="line">#scheme: Pisces</span><br><span class="line">#scheme: Gemini</span><br></pre></td></tr></table></figure>
<h3 id="基础设置"><a href="#基础设置" class="headerlink" title="基础设置"></a>基础设置</h3><p>在站点目录下的配置文件_cofig.yml中修改</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"># Site</span><br><span class="line">title: your blog title</span><br><span class="line">subtitle:</span><br><span class="line">description: describe yourself</span><br><span class="line">keywords:</span><br><span class="line">author: yourname</span><br><span class="line">language: zh-Hans //简体中文</span><br><span class="line">timezone:</span><br></pre></td></tr></table></figure>
<h3 id="修改菜单项"><a href="#修改菜单项" class="headerlink" title="修改菜单项"></a>修改菜单项</h3><p>在主题目录下修改配置文件_cofig.yml中的menu</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line">  home: / || home</span><br><span class="line">  about: /about/ || user</span><br><span class="line">  tags: /tags/ || tags</span><br><span class="line">  categories: /categories/ || th</span><br><span class="line">  archives: /archives/ || archive</span><br><span class="line">  #schedule: /schedule/ || calendar</span><br><span class="line">  #sitemap: /sitemap.xml || sitemap</span><br><span class="line">  #commonweal: /404/ || heartbeat</span><br></pre></td></tr></table></figure>
<p>这些配置都要与你主题目录下的languages文件中对应的yml文档里配置相关联</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">menu:</span><br><span class="line">  home: 首页</span><br><span class="line">  archives: 归档</span><br><span class="line">  categories: 分类</span><br><span class="line">  tags: 标签</span><br><span class="line">  about: 关于</span><br><span class="line">  search: 搜索</span><br><span class="line">  schedule: 日程表</span><br><span class="line">  sitemap: 站点地图</span><br><span class="line">  commonweal: 公益404</span><br></pre></td></tr></table></figure>
<h3 id="限定主页文章高度"><a href="#限定主页文章高度" class="headerlink" title="限定主页文章高度"></a>限定主页文章高度</h3><p>修改主题目录下的值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">auto_excerpt:</span><br><span class="line">  enable: true</span><br><span class="line">  length: 150</span><br></pre></td></tr></table></figure>
<h3 id="设置头像"><a href="#设置头像" class="headerlink" title="设置头像"></a>设置头像</h3><p>修改主题目录下Sidebar Avatar的avatar值<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># Sidebar Avatar</span><br><span class="line"># in theme directory(source/images): /images/avatar.gif</span><br><span class="line"># in site  directory(source/uploads): /uploads/avatar.gif</span><br><span class="line">avatar: /images/avatar.jpg</span><br></pre></td></tr></table></figure></p>
<p>地址可以是网络地址，也可以是本地地址（放置在source/images/ 目录下）</p>
<h3 id="添加标签页面"><a href="#添加标签页面" class="headerlink" title="添加标签页面"></a>添加标签页面</h3><p>点击标签，跳转的页面会显示page not found</p>
<p>此时需要在站点目录的source文件夹里新建tags文件夹，并新建index.md，添加：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: tags</span><br><span class="line">date: </span><br><span class="line">type: &quot;tags&quot;</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<p>当要为某一篇文章添加标签，只需在blog/source/_post目录下的具体文章的tags中添加标签即可</p>
<h3 id="实现点击出现桃心效果"><a href="#实现点击出现桃心效果" class="headerlink" title="实现点击出现桃心效果"></a>实现点击出现桃心效果</h3><p>将代码copy到/themes/next/source/js/src里面新建的love.js中</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">! function(e, t, a) &#123;</span><br><span class="line">    function n() &#123;</span><br><span class="line">        c(&quot;.heart&#123;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);&#125;.heart:after,.heart:before&#123;content: &apos;&apos;;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;&#125;.heart:after&#123;top: -5px;&#125;.heart:before&#123;left: -5px;&#125;&quot;), o(), r()</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    function r() &#123;</span><br><span class="line">        for (var e = 0; e &lt; d.length; e++) d[e].alpha &lt;= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = &quot;left:&quot; + d[e].x + &quot;px;top:&quot; + d[e].y + &quot;px;opacity:&quot; + d[e].alpha + &quot;;transform:scale(&quot; + d[e].scale + &quot;,&quot; + d[e].scale + &quot;) rotate(45deg);background:&quot; + d[e].color + &quot;;z-index:99999&quot;);</span><br><span class="line">        requestAnimationFrame(r)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    function o() &#123;</span><br><span class="line">        var t = &quot;function&quot; == typeof e.onclick &amp;&amp; e.onclick;</span><br><span class="line">        e.onclick = function(e) &#123;</span><br><span class="line">            t &amp;&amp; t(), i(e)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    function i(e) &#123;</span><br><span class="line">        var a = t.createElement(&quot;div&quot;);</span><br><span class="line">        a.className = &quot;heart&quot;, d.push(&#123;</span><br><span class="line">            el: a,</span><br><span class="line">            x: e.clientX - 5,</span><br><span class="line">            y: e.clientY - 5,</span><br><span class="line">            scale: 1,</span><br><span class="line">            alpha: 1,</span><br><span class="line">            color: s()</span><br><span class="line">        &#125;), t.body.appendChild(a)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    function c(e) &#123;</span><br><span class="line">        var a = t.createElement(&quot;style&quot;);</span><br><span class="line">        a.type = &quot;text/css&quot;;</span><br><span class="line">        try &#123;</span><br><span class="line">            a.appendChild(t.createTextNode(e))</span><br><span class="line">        &#125; catch (t) &#123;</span><br><span class="line">            a.styleSheet.cssText = e</span><br><span class="line">        &#125;</span><br><span class="line">        t.getElementsByTagName(&quot;head&quot;)[0].appendChild(a)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    function s() &#123;</span><br><span class="line">        return &quot;rgb(&quot; + ~~(255 * Math.random()) + &quot;,&quot; + ~~(255 * Math.random()) + &quot;,&quot; + ~~(255 * Math.random()) + &quot;)&quot;</span><br><span class="line">    &#125;</span><br><span class="line">    var d = [];</span><br><span class="line">    e.requestAnimationFrame = function() &#123;</span><br><span class="line">        return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) &#123;</span><br><span class="line">            setTimeout(e, 1e3 / 60)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;(), n()</span><br><span class="line">&#125;(window, document);</span><br></pre></td></tr></table></figure>
<p>打开\themes\next\layout_layout.swig文件,在末尾（在前面引用会出现找不到的bug） ，引用love.js</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=&quot;/js/src/love.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="添加动态背景"><a href="#添加动态背景" class="headerlink" title="添加动态背景"></a>添加动态背景</h3><p>打开\themes\next\layout_layout.swig文件，<br>在 之前添加代码(注意不要放在&lt; /head&gt;的后面)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% if theme.canvas_nest %&#125;</span><br><span class="line">&lt;script type=&quot;text/javascript&quot; src=&quot;//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>
<p>打开开\themes\next_config.yml,在里面修改为如下代码</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">canvas_nest: true</span><br></pre></td></tr></table></figure>
<h3 id="在网站底部加上访问量"><a href="#在网站底部加上访问量" class="headerlink" title="在网站底部加上访问量"></a>在网站底部加上访问量</h3><p>打开\themes\next\layout_partials\footer.swig文件,在类copyright前加上这段代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script async src=&quot;https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>然后在合适的位置添加显示统计的代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;powered-by&quot;&gt;</span><br><span class="line">&lt;i class=&quot;fa fa-user-md&quot;&gt;&lt;/i&gt;&lt;span id=&quot;busuanzi_container_site_uv&quot;&gt;</span><br><span class="line">  本站访客数:&lt;span id=&quot;busuanzi_value_site_uv&quot;&gt;&lt;/span&gt;</span><br><span class="line">&lt;/span&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h3 id="在每篇文章末尾添加“本文结束”标记"><a href="#在每篇文章末尾添加“本文结束”标记" class="headerlink" title="在每篇文章末尾添加“本文结束”标记"></a>在每篇文章末尾添加“本文结束”标记</h3><p>在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &#123;% if not is_index %&#125;</span><br><span class="line">        &lt;div style=&quot;text-align:center;color: #ccc;font-size:14px;&quot;&gt;-------------本文结束&lt;i class=&quot;fa fa-paw&quot;&gt;&lt;/i&gt;感谢您的阅读-------------&lt;/div&gt;</span><br><span class="line">    &#123;% endif %&#125;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下代码</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">  &#123;% if not is_index %&#125;</span><br><span class="line">    &#123;% include &apos;passage-end-tag.swig&apos; %&#125;</span><br><span class="line">  &#123;% endif %&#125;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>打开主题配置文件,在末尾添加</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># 文章末尾添加“本文结束”标记</span><br><span class="line">passage_end_tag:</span><br><span class="line">  enabled: true</span><br></pre></td></tr></table></figure>
<h3 id="侧边栏社交链接"><a href="#侧边栏社交链接" class="headerlink" title="侧边栏社交链接"></a>侧边栏社交链接</h3><p>在主题配置文件中修改：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"># Social links</span><br><span class="line">social:</span><br><span class="line">  GitHub: https://github.com/your-user-name</span><br><span class="line">  Twitter: https://twitter.com/your-user-name</span><br><span class="line">  微博: http://weibo.com/your-user-name</span><br><span class="line"></span><br><span class="line"># Social Icons</span><br><span class="line">social_icons:</span><br><span class="line">  enable: true</span><br><span class="line">  # Icon Mappings</span><br><span class="line">  GitHub: github</span><br><span class="line">  Twitter: twitter</span><br><span class="line">  微博: weibo</span><br></pre></td></tr></table></figure>
<h3 id="添加小图标"><a href="#添加小图标" class="headerlink" title="添加小图标"></a>添加小图标</h3><p>在主题配置文件中修改：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">favicon:</span><br><span class="line">  #small: /images/favicon.ico</span><br><span class="line">  medium: /images/favicon.ico</span><br></pre></td></tr></table></figure>
<blockquote>
<p><a href="http://theme-next.iissnan.com/getting-started.html#avatar-setting" target="_blank" rel="noopener">NexT主题美化</a></p>
</blockquote>
<p>除了NexT还有很多其他好看的主题，百度会有很多方法的</p>

          
        
      
    </div>
    
    
    

    

    

    <div>
      
    </div>

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/04/git使用/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Sivan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Sivan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/04/git使用/" itemprop="url">git使用</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-04T21:12:37+08:00">
                2018-05-04
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/git/" itemprop="url" rel="index">
                    <span itemprop="name">git</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  4,697 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  19 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>git的简介、安装就不罗嗦了，详细的教程可参考<br><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">廖雪峰的git教程</a></p>
<h1 id="创建版本库（初始化一个git仓库）"><a href="#创建版本库（初始化一个git仓库）" class="headerlink" title="创建版本库（初始化一个git仓库）"></a>创建版本库（初始化一个git仓库）</h1><h3 id="第一步"><a href="#第一步" class="headerlink" title="第一步"></a>第一步</h3><p>选择一个合适的地方，创建一个空目录learngit</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ mkdir learngit</span><br><span class="line">$ cd learngit</span><br><span class="line">$ pwd</span><br></pre></td></tr></table></figure>
<p>pwd命令用于显示当前目录</p>
<h3 id="第二步"><a href="#第二步" class="headerlink" title="第二步"></a>第二步</h3><p>通过git init命令把这个目录变成Git可以管理的仓库</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git init</span><br></pre></td></tr></table></figure>
<p>1、此时可以发现当前目录下多了一个.git的目录，这个目录是Git来跟踪管理版本库的，没事千万不要手动修改这个目录里面的文件，不然改乱了，就把Git仓库给破坏了。</p>
<p>2、如果没有看到.git目录，那是因为这个目录默认是隐藏的，用ls -ah命令就可以看见。</p>
<h1 id="添加文件到Git仓库"><a href="#添加文件到Git仓库" class="headerlink" title="添加文件到Git仓库"></a>添加文件到Git仓库</h1><p>编写一个readme.txt文件<br>内容为：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Git is a version control system.</span><br><span class="line">Git is free software.</span><br></pre></td></tr></table></figure>
<h3 id="第一步-1"><a href="#第一步-1" class="headerlink" title="第一步"></a>第一步</h3><p>用命令git add告诉Git，把文件添加到仓库</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git add readme.txt</span><br></pre></td></tr></table></figure>
<p>1、执行上面的命令，没有任何显示，这就对了，Unix的哲学是“没有消息就是好消息”，说明添加成功 </p>
<p>2、add可反复多次使用，添加多个文件</p>
<h3 id="第二步-1"><a href="#第二步-1" class="headerlink" title="第二步"></a>第二步</h3><p>用命令git commit告诉Git，把文件提交到仓库</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git commit -m &quot;wrote a readme file&quot;</span><br></pre></td></tr></table></figure>
<p>1、-m后面输入的是本次提交的说明，可以输入任意内容，当然最好是有意义的  </p>
<p>2、commit可以一次提交很多文件，所以你可以多次add不同的文件</p>
<h1 id="修改文件并提交"><a href="#修改文件并提交" class="headerlink" title="修改文件并提交"></a>修改文件并提交</h1><p>修改readme.txt文件，改成如下内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Git is a distributed version control system.</span><br><span class="line">Git is free software.</span><br></pre></td></tr></table></figure>
<h2 id="git-status"><a href="#git-status" class="headerlink" title="git status"></a>git status</h2><p>运行git status命令看看结果</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git status</span><br></pre></td></tr></table></figure>
<p>git status命令可以让我们时刻掌握仓库当前的状态</p>
<h2 id="git-diff"><a href="#git-diff" class="headerlink" title="git diff"></a>git diff</h2><p>比如有一个项目，隔了好几天没碰过了，想要继续写的时候，又忘了上次是怎么修改的，那么<br>运行git diff命令看看具体修改了什么内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git diff readme.txt</span><br></pre></td></tr></table></figure>
<p>git diff顾名思义就是查看difference</p>
<h2 id="提交修改（与提交新文件一样）"><a href="#提交修改（与提交新文件一样）" class="headerlink" title="提交修改（与提交新文件一样）"></a>提交修改（与提交新文件一样）</h2><h3 id="第一步-2"><a href="#第一步-2" class="headerlink" title="第一步"></a>第一步</h3><p>git add</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git add readme.txt</span><br></pre></td></tr></table></figure>
<h3 id="第二步-2"><a href="#第二步-2" class="headerlink" title="第二步"></a>第二步</h3><p>git commit</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git commit -m &quot;add distributed&quot;</span><br></pre></td></tr></table></figure>
<h1 id="版本回退"><a href="#版本回退" class="headerlink" title="版本回退"></a>版本回退</h1><p>现在，我们回顾一下readme.txt文件一共有几个版本被提交到Git仓库里了</p>
<p>版本一：wrote a readme file</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Git is a version control system.</span><br><span class="line">Git is free software.</span><br></pre></td></tr></table></figure>
<p>版本二：add distributed</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Git is a distributed version control system.</span><br><span class="line">Git is free software.</span><br></pre></td></tr></table></figure>
<h2 id="git-log"><a href="#git-log" class="headerlink" title="git log"></a>git log</h2><p>运行git log命令可以查看每次修改的历史记录</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git log</span><br></pre></td></tr></table></figure>
<p>该命令显示从最近到最远的提交日志</p>
<h2 id="回退"><a href="#回退" class="headerlink" title="回退"></a>回退</h2><h3 id="git-reset"><a href="#git-reset" class="headerlink" title="git reset"></a>git reset</h3><p>运行git reset命令把版本二回退到版本一</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ git reset --hard HEAD     //当前版本</span><br><span class="line">$ git reset --hard HEAD^    //回退到上一个版本</span><br><span class="line">$ git reset --hard HEAD^^   //回退到上上一个版本</span><br></pre></td></tr></table></figure>
<p>若有多个版本，可继续使用git reset命令回退</p>
<h3 id="cat"><a href="#cat" class="headerlink" title="cat "></a>cat <file></file></h3><p>看看readme.txt的内容是不是版本一</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ cat readme.txt</span><br></pre></td></tr></table></figure>
<h2 id="后悔回退，恢复版本"><a href="#后悔回退，恢复版本" class="headerlink" title="后悔回退，恢复版本"></a>后悔回退，恢复版本</h2><p>此时，使用git log看一下版本库里的版本，哎呀，版本二不见了<br>那如果此时我又后悔了，我想要回退之前的版本了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git reset --hard 所需版本的commit id</span><br></pre></td></tr></table></figure>
<p>commit id不知道怎么办？？？<br>1、不怕，只要上面的命令行窗口还没有被关掉，你就可以顺着往上找啊找啊，找到回退前执行git log后的版本库，每一个版本的commit后那一长串乱码一样的东西就是该版本的commit id了<br>当然，commit id很长，没必要写全，写前几位就好了（一般七位吧）</p>
<p>恢复版本二</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git reset --hard f3ab58</span><br></pre></td></tr></table></figure>
<p>2、可是，当你关掉了命令行窗口后才后悔怎么办？？？<br>不怕，在Git中，总是有后悔药可以吃的 </p>
<p>Git提供了一个命令git reflog用来记录你的每一次命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git reflog</span><br></pre></td></tr></table></figure>
<p>又可以找回所需版本的commit id了</p>
<h1 id="工作区与暂存区"><a href="#工作区与暂存区" class="headerlink" title="工作区与暂存区"></a>工作区与暂存区</h1><h2 id="工作区"><a href="#工作区" class="headerlink" title="工作区"></a>工作区</h2><p>就是你在电脑里能看到的目录，比如我的learngit文件夹就是一个工作区</p>
<h2 id="版本库"><a href="#版本库" class="headerlink" title="版本库"></a>版本库</h2><p>工作区有一个隐藏目录.git，这个不算工作区，而是Git的版本库</p>
<p>Git的版本库里存了很多东西<br>1、最重要的就是称为stage（或者叫index）的暂存区<br>2、还有Git为我们自动创建的第一个分支master<br>3、以及指向master的一个指针叫HEAD</p>
<p><img src="https://www.liaoxuefeng.com/files/attachments/001384907702917346729e9afbf4127b6dfbae9207af016000/0" alt="image"></p>
<p>前面讲了提交新文件到Git版本库：</p>
<p>第一步是用git add把文件添加进去，实际上就是把文件修改添加到暂存区；</p>
<p>第二步是用git commit提交更改，实际上就是把暂存区的所有内容提交到当前分支</p>
<h1 id="撤销修改"><a href="#撤销修改" class="headerlink" title="撤销修改"></a>撤销修改</h1><h2 id="git-checkout-–-file"><a href="#git-checkout-–-file" class="headerlink" title="git checkout – file"></a>git checkout – file</h2><p>场景一（仅修改了文件） </p>
<p>有一次头脑混乱，在readme.txt中加了一行乱码，死定了，要赶紧手动删掉，以为这样就没事了吗？不，事儿可大了，运行git status查看</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git status</span><br></pre></td></tr></table></figure>
<p>会显示改动了readme.txt</p>
<p>这时候，运行<strong>git checkout – file</strong>丢弃工作区的修改即可</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout -- readme.txt</span><br></pre></td></tr></table></figure>
<p>有两种情况（都是修改了工作区的文件导致工作区与版本库不一致）：</p>
<p>一种是readme.txt自修改后还没有被放到暂存区，现在，撤销修改就回到和版本库一模一样的状态</p>
<p>一种是readme.txt已经添加到暂存区后，又作了修改，现在，撤销修改就回到添加到暂存区后的状态</p>
<h2 id="git-reset-HEAD-file"><a href="#git-reset-HEAD-file" class="headerlink" title="git reset HEAD file"></a>git reset HEAD file</h2><p>场景二（修改文件后，git add到暂存区了）</p>
<p>有一次头脑更混乱，不仅在readme.txt中加了一行乱码，还git add到暂存区了 </p>
<p>幸好，用git status查看</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git status</span><br></pre></td></tr></table></figure>
<p>显示还没有提交</p>
<p>这时候运行命令<strong>git reset HEAD file</strong>可以把暂存区的修改撤销掉（unstage），重新放回工作区即可</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git reset HEAD readme.txt</span><br></pre></td></tr></table></figure>
<p>再用git status查看</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git status</span><br></pre></td></tr></table></figure>
<p>现在暂存区是干净的，工作区有修改，回到场景一即可</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout -- readme.txt</span><br></pre></td></tr></table></figure>
<h2 id="版本回退-1"><a href="#版本回退-1" class="headerlink" title="版本回退"></a>版本回退</h2><p>场景三（改了文件，不仅添加了，还提交了）</p>
<p>回到上上一个内容<strong>版本回退</strong>了</p>
<h1 id="删除文件"><a href="#删除文件" class="headerlink" title="删除文件"></a>删除文件</h1><p>一般情况下，你通常直接在文件管理器中把没用的文件删了，或者用rm命令删了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ rm test.txt</span><br></pre></td></tr></table></figure>
<p>Git知道你删除了文件，因此，工作区和版本库就不一致了，git status命令会立刻告诉你哪些文件被删除了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git status</span><br></pre></td></tr></table></figure>
<p>此时有两种情况</p>
<h2 id="第一种情况"><a href="#第一种情况" class="headerlink" title="第一种情况"></a>第一种情况</h2><p>确实要从版本库中删除该文件</p>
<p>运行命令git rm删掉</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git rm test.txt</span><br></pre></td></tr></table></figure>
<p>并且git commit</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git commit -m &quot;remove test.txt&quot;</span><br></pre></td></tr></table></figure>
<h2 id="第二种情况"><a href="#第二种情况" class="headerlink" title="第二种情况"></a>第二种情况</h2><p>删错了</p>
<p>因为版本库里还有呢，所以可以很轻松地把误删的文件恢复到最新版本</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout -- test.txt</span><br></pre></td></tr></table></figure>
<p>git checkout – file 其实是用版本库里的版本替换工作区的版本，无论工作区是修改还是删除，都可以“一键还原”</p>
<h1 id="远程仓库"><a href="#远程仓库" class="headerlink" title="远程仓库"></a>远程仓库</h1><p>git的杀手级功能—远程仓库<br>这个世界上有个叫GitHub的神奇的网站，这个网站是提供Git仓库托管服务的，只要注册一个GitHub账号，就可以免费获得Git远程仓库</p>
<h2 id="设置SSH-Key"><a href="#设置SSH-Key" class="headerlink" title="设置SSH Key"></a>设置SSH Key</h2><p>由于本地Git仓库和GitHub仓库之间的传输是通过SSH加密的</p>
<h3 id="第一步-3"><a href="#第一步-3" class="headerlink" title="第一步"></a>第一步</h3><p>创建SSH Key</p>
<p>在用户主目录下，看看有没有.ssh目录；如果有，再看看这个目录下有没有id_rsa和id_rsa.pub这两个文件；如果已经有了，可直接跳到下一步</p>
<p>如果没有，打开Shell（Windows下打开Git Bash），创建SSH Key</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ ssh-keygen -t rsa -C &quot;youremail@example.com&quot;</span><br></pre></td></tr></table></figure>
<p>一路回车，使用默认值即可，由于这个Key也不是用于军事目的，所以也无需设置密码</p>
<h3 id="第二步-3"><a href="#第二步-3" class="headerlink" title="第二步"></a>第二步</h3><p>登陆GitHub，打开“Account settings”，“SSH Keys”页面，</p>
<p>然后，点“Add SSH Key”，填上任意Title，在Key文本框里粘贴id_rsa.pub文件的内容</p>
<h2 id="把本地项目添加到远程库"><a href="#把本地项目添加到远程库" class="headerlink" title="把本地项目添加到远程库"></a>把本地项目添加到远程库</h2><h3 id="第一步-4"><a href="#第一步-4" class="headerlink" title="第一步"></a>第一步</h3><p>通过命令git init把项目文件夹变成Git可管理的仓库</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git init</span><br></pre></td></tr></table></figure>
<h3 id="第二步-4"><a href="#第二步-4" class="headerlink" title="第二步"></a>第二步</h3><p>把项目粘贴到这个本地Git仓库里面</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git add .</span><br></pre></td></tr></table></figure>
<h3 id="第三步"><a href="#第三步" class="headerlink" title="第三步"></a>第三步</h3><p>把项目提交到仓库</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git commit -m &quot;注释&quot;</span><br></pre></td></tr></table></figure>
<h3 id="第四步"><a href="#第四步" class="headerlink" title="第四步"></a>第四步</h3><p>登陆GitHub，然后，在右上角找到“Create a new repo”按钮，创建一个新的仓库，在Repository name填入learngit，其他保持默认设置，点击“Create repository”按钮，就成功地创建了一个新的Git仓库</p>
<p>目前，在GitHub上的这个learngit仓库还是空的</p>
<h3 id="第五步"><a href="#第五步" class="headerlink" title="第五步"></a>第五步</h3><p>在本地的learngit仓库下运行命令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git remote add origin git@github.com:michaelliao/learngit.git</span><br></pre></td></tr></table></figure>
<p>michaelliao替换成自己的GitHub账户名<br>使本地仓库关联远程库<br>添加后，远程库的名字就是origin，这是Git默认的叫法</p>
<h3 id="第六步"><a href="#第六步" class="headerlink" title="第六步"></a>第六步</h3><p>把本地库的所有内容推送到远程库上</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git push -u origin master</span><br></pre></td></tr></table></figure>
<h3 id="最后的最后"><a href="#最后的最后" class="headerlink" title="最后的最后"></a>最后的最后</h3><p>从现在起，只要本地作了提交，就可以运行命令把本地master分支的最新修改推送至GitHub</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git push origin master</span><br></pre></td></tr></table></figure>
<h2 id="从远程库克隆到本地库"><a href="#从远程库克隆到本地库" class="headerlink" title="从远程库克隆到本地库"></a>从远程库克隆到本地库</h2><h3 id="第一步-5"><a href="#第一步-5" class="headerlink" title="第一步"></a>第一步</h3><p>登陆GitHub，创建一个新的仓库，名字叫gitskills<br>勾选Initialize this repository with a README，这样GitHub会自动为我们创建一个README.md文件。创建完毕后，可以看到README.md文件</p>
<h3 id="第二步-5"><a href="#第二步-5" class="headerlink" title="第二步"></a>第二步</h3><p>用命令git clone克隆一个本地库</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git clone git@github.com:michaelliao/gitskills.git</span><br></pre></td></tr></table></figure>
<p>michaelliao替换成自己的GitHub账户名</p>
<h1 id="分支管理"><a href="#分支管理" class="headerlink" title="分支管理"></a>分支管理</h1><h2 id="创建与合并分支"><a href="#创建与合并分支" class="headerlink" title="创建与合并分支"></a>创建与合并分支</h2><p>一开始的时候，master分支是一条线，Git用master指向最新的提交，再用HEAD指向master，就能确定当前分支，以及当前分支的提交点</p>
<p><img src="https://www.liaoxuefeng.com/files/attachments/0013849087937492135fbf4bbd24dfcbc18349a8a59d36d000/0" alt="image"></p>
<p>每次提交，master分支都会向前移动一步，这样，随着你不断提交，master分支的线也越来越长</p>
<h3 id="第一步-6"><a href="#第一步-6" class="headerlink" title="第一步"></a>第一步</h3><p>创建dev分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git branch dev</span><br></pre></td></tr></table></figure>
<p>切换到dev分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout dev</span><br></pre></td></tr></table></figure>
<p>可合并为创建并切换到dev分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout -b dev</span><br></pre></td></tr></table></figure>
<h3 id="第二步-6"><a href="#第二步-6" class="headerlink" title="第二步"></a>第二步</h3><p>用git branch命令查看当前分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ git branch</span><br><span class="line">* dev</span><br><span class="line">  master</span><br></pre></td></tr></table></figure>
<p>git branch命令会列出所有分支，当前分支前面会标一个*号</p>
<h3 id="第三步-1"><a href="#第三步-1" class="headerlink" title="第三步"></a>第三步</h3><p>在dev分支上正常提交<br>比如对readme.txt做个修改，加上一行</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Creating a new branch is quick.</span><br></pre></td></tr></table></figure>
<p>然后提交</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ git add readme.txt </span><br><span class="line">$ git commit -m &quot;branch test&quot;</span><br></pre></td></tr></table></figure>
<h3 id="第四步-1"><a href="#第四步-1" class="headerlink" title="第四步"></a>第四步</h3><p>现在，dev分支的工作完成，我们就可以切换回master分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout master</span><br></pre></td></tr></table></figure>
<p>切换回master分支后，再查看一个readme.txt文件，刚才添加的内容不见了！因为那个提交是在dev分支上，而master分支此刻的提交点并没有变<br><img src="https://www.liaoxuefeng.com/files/attachments/001384908892295909f96758654469cad60dc50edfa9abd000/0" alt="image"></p>
<h3 id="第五步-1"><a href="#第五步-1" class="headerlink" title="第五步"></a>第五步</h3><p>把dev分支的工作成果合并到master分支上</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git merge dev</span><br></pre></td></tr></table></figure>
<p>git merge命令用于合并指定分支到当前分支<br>注意到上面的Fast-forward信息，Git告诉我们，这次合并是“快进模式</p>
<h3 id="第六步-1"><a href="#第六步-1" class="headerlink" title="第六步"></a>第六步</h3><p>合并完成后，就可以放心地删除dev分支了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git branch -d dev</span><br></pre></td></tr></table></figure>
<p>删除后，查看branch，就只剩下master分支了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ git branch</span><br><span class="line">* master</span><br></pre></td></tr></table></figure>
<h2 id="解决冲突"><a href="#解决冲突" class="headerlink" title="解决冲突"></a>解决冲突</h2><h3 id="第一步-7"><a href="#第一步-7" class="headerlink" title="第一步"></a>第一步</h3><p>此时，创建了一个新的分支feature1</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout -b feature1</span><br></pre></td></tr></table></figure>
<p>在readme.txt最后添加一行并提交</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Creating a new branch is quick AND simple.</span><br></pre></td></tr></table></figure>
<h3 id="第二步-7"><a href="#第二步-7" class="headerlink" title="第二步"></a>第二步</h3><p>切换到master分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout master</span><br></pre></td></tr></table></figure>
<p>在master分支上readme.txt最后添加一行并提交</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Creating a new branch is quick &amp; simple.</span><br></pre></td></tr></table></figure>
<p>此时，master分支和feature1分支各自都分别有新的提交<br><img src="https://www.liaoxuefeng.com/files/attachments/001384909115478645b93e2b5ae4dc78da049a0d1704a41000/0" alt="image"></p>
<h3 id="第三步-2"><a href="#第三步-2" class="headerlink" title="第三步"></a>第三步</h3><p>由于两个分支各自有修改，两者合并起来可能会有冲突</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git merge feature1</span><br></pre></td></tr></table></figure>
<p>git status会告诉我们冲突的文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git status</span><br></pre></td></tr></table></figure>
<p>也可以查看readme.txt的内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Git is a distributed version control system.</span><br><span class="line">Git is free software distributed under the GPL.</span><br><span class="line">&lt;&lt;&lt;&lt;&lt;&lt;&lt; HEAD</span><br><span class="line">Creating a new branch is quick &amp; simple.</span><br><span class="line">=======</span><br><span class="line">Creating a new branch is quick AND simple.</span><br><span class="line">&gt;&gt;&gt;&gt;&gt;&gt;&gt; feature1</span><br></pre></td></tr></table></figure>
<h3 id="第四步-2"><a href="#第四步-2" class="headerlink" title="第四步"></a>第四步</h3><p>此时，需要手动修改冲突内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Git is a distributed version control system.</span><br><span class="line">Git is free software distributed under the GPL.</span><br><span class="line">Creating a new branch is quick and simple.</span><br></pre></td></tr></table></figure>
<p>再提交</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ git add readme.txt </span><br><span class="line">$ git commit -m &quot;conflict fixed&quot;</span><br></pre></td></tr></table></figure>
<p>现在，master分支和feature1分支变成这样<br><img src="https://www.liaoxuefeng.com/files/attachments/00138490913052149c4b2cd9702422aa387ac024943921b000/0" alt="image"><br>用带参数的git log也可以看到分支的合并情况</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git log --graph --pretty=oneline --abbrev-commit</span><br></pre></td></tr></table></figure>
<h3 id="第五步-2"><a href="#第五步-2" class="headerlink" title="第五步"></a>第五步</h3><p>最后，删除feature1分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git branch -d feature1</span><br></pre></td></tr></table></figure>
<h2 id="分支管理策略"><a href="#分支管理策略" class="headerlink" title="分支管理策略"></a>分支管理策略</h2><p>通常，合并分支时，如果可能，Git会用Fast forward模式，但这种模式下，删除分支后，会丢掉分支信息。</p>
<p>如果要强制禁用Fast forward模式，Git就会在merge时生成一个新的commit，这样，从分支历史上就可以看出分支信息</p>
<h3 id="第一步-8"><a href="#第一步-8" class="headerlink" title="第一步"></a>第一步</h3><p>创建并切换dev分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout -b dev</span><br></pre></td></tr></table></figure>
<h3 id="第二步-8"><a href="#第二步-8" class="headerlink" title="第二步"></a>第二步</h3><p>修改readme.txt文件，并提交一个新的commit</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ git add readme.txt </span><br><span class="line">$ git commit -m &quot;add merge&quot;</span><br></pre></td></tr></table></figure>
<h3 id="第三步-3"><a href="#第三步-3" class="headerlink" title="第三步"></a>第三步</h3><p>切换回master</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout master</span><br></pre></td></tr></table></figure>
<h3 id="第四步-3"><a href="#第四步-3" class="headerlink" title="第四步"></a>第四步</h3><p>准备合并dev分支，请注意–no-ff参数，表示禁用Fast forward</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git merge --no-ff -m &quot;merge with no-ff&quot; dev</span><br></pre></td></tr></table></figure>
<p>加上-m参数，把commit描述写进去</p>
<p>合并后，我们用git log看看分支历史</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git log --graph --pretty=oneline --abbrev-commit</span><br></pre></td></tr></table></figure>
<p><img src="https://cdn.webxueyuan.com/cdn/files/attachments/001384909222841acf964ec9e6a4629a35a7a30588281bb000/0" alt="image"></p>
<h2 id="Bug分支"><a href="#Bug分支" class="headerlink" title="Bug分支"></a>Bug分支</h2><p>某天突然接到一个修复一个代号101的bug的任务时，很自然地，你想创建一个分支issue-101来修复它，但当前正在dev上进行的工作还没有提交，并不是你不想提交，而是工作只进行到一半，还没法提交，预计完成还需1天时间。但是，必须在两个小时内修复该bug</p>
<h3 id="第一步-9"><a href="#第一步-9" class="headerlink" title="第一步"></a>第一步</h3><p>把当前工作现场“储藏”起来，等以后恢复现场后继续工作</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git stash</span><br></pre></td></tr></table></figure>
<p>现在，用git status查看工作区，就是干净的</p>
<h3 id="第二步-9"><a href="#第二步-9" class="headerlink" title="第二步"></a>第二步</h3><p>首先确定要在哪个分支上修复bug，假定需要在master分支上修复，就从master创建临时分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout master</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout -b issue-101</span><br></pre></td></tr></table></figure>
<h3 id="第三步-4"><a href="#第三步-4" class="headerlink" title="第三步"></a>第三步</h3><p>修复bug，然后提交</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ git add readme.txt </span><br><span class="line">$ git commit -m &quot;fix bug 101&quot;</span><br></pre></td></tr></table></figure>
<h3 id="第四步-4"><a href="#第四步-4" class="headerlink" title="第四步"></a>第四步</h3><p>修复完成后，切换到master分支，并完成合并，最后删除issue-101分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout master</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git merge --no-ff -m &quot;merged bug fix 101&quot; issue-101</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git branch -d issue-101</span><br></pre></td></tr></table></figure>
<h3 id="第五步-3"><a href="#第五步-3" class="headerlink" title="第五步"></a>第五步</h3><p>接着回到dev分支干活了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout dev</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git status</span><br></pre></td></tr></table></figure>
<p>工作区是干净的，用git stash list命令看看刚才的工作现场存到哪去了？</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git stash list</span><br></pre></td></tr></table></figure>
<h3 id="第六步-2"><a href="#第六步-2" class="headerlink" title="第六步"></a>第六步</h3><p>恢复stash内容</p>
<p>一种是用git stash apply恢复，然后用git stash drop删除stash内容</p>
<p>另一种方式是用git stash pop，恢复的同时把stash内容也删了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git stash pop</span><br></pre></td></tr></table></figure>
<p>可以多次stash，恢复的时候，先用git stash list查看，然后恢复指定的stash</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git stash apply stash@&#123;0&#125;</span><br></pre></td></tr></table></figure>
<h3 id="疑问"><a href="#疑问" class="headerlink" title="疑问"></a>疑问</h3><h4 id="第一个问题"><a href="#第一个问题" class="headerlink" title="第一个问题"></a>第一个问题</h4><p>在dev中工作，在master中创建分支修改bug，好像互不相干呀，为什么要stash呢？</p>
<p>暂存区是公用的，如果不通过stash命令隐藏，会带到其它分支（issue-101）去</p>
<h4 id="第二个问题"><a href="#第二个问题" class="headerlink" title="第二个问题"></a>第二个问题</h4><p>为什么要创建分支修改bug呢，直接在master中改不就好了吗？  </p>
<p>实际项目中，这个bug可能很麻烦，你需要修复一天的时间才能搞定，如果你不创建101分支，那么这时候你们组内其他小伙伴也要紧急修复线上一个bug，但是他的bug可能就1分钟。他修复好了却不能上线，因为你没有创建分支，要等你一天，才能把你处理好的正确代码一起上线。<br>可能也会觉得创建分支不够效率，但是工作中稳健很重要</p>
<h2 id="Feature分支"><a href="#Feature分支" class="headerlink" title="Feature分支"></a>Feature分支</h2><p>每添加一个新功能，最好新建一个feature分支，在上面开发，完成后，合并，最后，删除该feature分支</p>
<h3 id="第一步-10"><a href="#第一步-10" class="headerlink" title="第一步"></a>第一步</h3><p>开发并提交</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout -b feature-vulcan</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ git add vulcan.py</span><br><span class="line">$ git commit -m &quot;add feature vulcan&quot;</span><br></pre></td></tr></table></figure>
<h3 id="第二步-10"><a href="#第二步-10" class="headerlink" title="第二步"></a>第二步</h3><p>切回dev，准备合并</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git checkout dev</span><br></pre></td></tr></table></figure>
<h3 id="第三步-5"><a href="#第三步-5" class="headerlink" title="第三步"></a>第三步</h3><p>一切顺利的话，feature分支和bug分支是类似的，合并，然后删除<br>但是，由于种种原因，新功能取消，这个分支必须就地销毁</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git branch -d feature-vulcan</span><br></pre></td></tr></table></figure>
<p>销毁失败</p>
<p>Git友情提醒，feature-vulcan分支还没有被合并，如果删除，将丢失掉修改<br>如果要强行删除，需要使用命令git branch -D feature-vulcan</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git branch -D feature-vulcan</span><br></pre></td></tr></table></figure>
<h2 id="多人协作"><a href="#多人协作" class="headerlink" title="多人协作"></a>多人协作</h2><p>查看远程库的信息</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git remote</span><br></pre></td></tr></table></figure>
<p>显示更详细的信息</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git remote -v</span><br></pre></td></tr></table></figure>
<h3 id="推送分支"><a href="#推送分支" class="headerlink" title="推送分支"></a>推送分支</h3><p>推送分支，就是把该分支上的所有本地提交推送到远程库</p>
<p>推送时，要指定本地分支，这样，Git就会把该分支推送到远程库对应的远程分支上</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git push origin master</span><br></pre></td></tr></table></figure>
<p>或推送其他分支</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git push origin dev</span><br></pre></td></tr></table></figure>
<p>注意：</p>
<p>1、master分支是主分支，因此要时刻与远程同步；</p>
<p>2、dev分支是开发分支，团队所有成员都需要在上面工作，所以也需要与远程同步；</p>
<p>3、bug分支只用于在本地修复bug，就没必要推到远程了，除非老板要看看你每周到底修复了几个bug；</p>
<p>4、feature分支是否推到远程，取决于你是否和你的小伙伴合作在上面开发。</p>
<h3 id="抓取分支"><a href="#抓取分支" class="headerlink" title="抓取分支"></a>抓取分支</h3><p>当push失败时，则因为远程分支比你的本地更新</p>
<p>先用git pull把最新的提交从origin/dev抓下来，然后，在本地合并，解决冲突，再推送</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git pull</span><br></pre></td></tr></table></figure>
<p>git pull也失败了，原因是没有指定本地dev分支与远程origin/dev分支的链接</p>
<p>设置dev和origin/dev的链接</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git branch --set-upstream dev origin/dev</span><br></pre></td></tr></table></figure>
<p>再pull</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git pull</span><br></pre></td></tr></table></figure>
<p>git pull成功，但是合并有冲突，需要手动解决，解决的方法和分支管理中的解决冲突完全一样</p>
<p>解决后，提交，再push</p>
<h1 id="标签管理"><a href="#标签管理" class="headerlink" title="标签管理"></a>标签管理</h1><h3 id="创建标签"><a href="#创建标签" class="headerlink" title="创建标签"></a>创建标签</h3><p>首先，切换到需要打标签的分支上</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$ git branch</span><br><span class="line">* dev</span><br><span class="line">  master</span><br><span class="line">$ git checkout master</span><br><span class="line">Switched to branch &apos;master&apos;</span><br></pre></td></tr></table></figure>
<p>创建一个新标签</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git tag &lt;name&gt;</span><br></pre></td></tr></table></figure>
<p>还可以创建带有说明的标签，用-a指定标签名，-m指定说明文字</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git tag -a &lt;tagname&gt; -m &quot;blablabla...&quot;</span><br></pre></td></tr></table></figure>
<p>查看所有标签</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ git tag  //按字母排序</span><br><span class="line">$ git show &lt;tagname&gt;</span><br></pre></td></tr></table></figure>
<p>默认标签是打在最新提交的commit上的</p>
<p>有时候，如果忘了打标签</p>
<p>方法是找到历史提交的commit id</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git log --pretty=oneline --abbrev-commit</span><br></pre></td></tr></table></figure>
<p>然后打上标签就可以了<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git tag &lt;name&gt; &lt;commit id&gt;</span><br></pre></td></tr></table></figure></p>
<h3 id="未完待续"><a href="#未完待续" class="headerlink" title="未完待续"></a>未完待续</h3>
          
        
      
    </div>
    
    
    

    

    

    <div>
      
    </div>

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/03/引用类型/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Sivan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Sivan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/03/引用类型/" itemprop="url">引用类型</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-03T22:43:43+08:00">
                2018-05-03
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/红宝书/" itemprop="url" rel="index">
                    <span itemprop="name">红宝书</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  1,401 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  5 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h1><p>在学习引用类型之前，先弄清楚一些概念性的问题可能会比较好。<br>接下来我就以已经学习过的类型来简单说明一下几个概念之间的关系：<br>首先，JavaScript包含数据类型和引用类型</p>
<h2 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h2><ul>
<li>复杂数据类型：Object</li>
<li>简单数据类型：Boolean、Number、String、Undefined、Null</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">可用typeof运算符检测给定变量的数据类型</span><br><span class="line">如：alert(typeof 95);//&quot;number&quot;</span><br></pre></td></tr></table></figure>
<h2 id="引用类型"><a href="#引用类型" class="headerlink" title="引用类型"></a>引用类型</h2><p>这是一个最大的概念，也称为本地对象或者类</p>
<ul>
<li>内置对象：Global、Math</li>
<li>基本包装类型（特殊的引用类型）：Boolean、Number、String</li>
</ul>
<p>与其他引用类型相似：具有与各自的基本类型相应的特殊行为。<br>不同：自动创建的基本包装类型的对象，只存在于一行代码的执行瞬间，然后立即被销毁。当然，可以使用new操作符显示创建对象，虽说绝对必要的情况才这样，但我觉得好像大多是这样做的（我的错觉？）</p>
<ul>
<li>其他：Object、Array、Date、RegExp、Function</li>
</ul>
<hr>
<p>每一个引用类型都有相应的属性和方法，其中又分为静态和实例      </p>
<ul>
<li>静态属性、方法：无需创建对象实例，可直接通过引用类型调用（内置对象中的都为静态属性和方法）</li>
<li>实例属性、方法：每个对象实例都具有的（其他引用类型中常用的方法均为实例方法）</li>
</ul>
<hr>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">由于无论引用的是什么类型的对象，typeof运算符都返回&quot;object&quot;</span><br><span class="line">可用instanceof运算符识别正在处理的对象的具体类型</span><br><span class="line">如：alert(95 instanceof Number);//true</span><br></pre></td></tr></table></figure>
<hr>
<h1 id="引用类型-1"><a href="#引用类型-1" class="headerlink" title="引用类型"></a>引用类型</h1><h2 id="内置对象-（不必实例化）"><a href="#内置对象-（不必实例化）" class="headerlink" title="内置对象 （不必实例化）"></a>内置对象 （不必实例化）</h2><ul>
<li><h3 id="Global对象"><a href="#Global对象" class="headerlink" title="Global对象"></a>Global对象</h3></li>
</ul>
<h4 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">window.属性(方法)/属性(方法)</span><br></pre></td></tr></table></figure>
<h4 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h4><p>1、这是最特别的一个对象，不管从什么角度看，它都是不存在的<br>2、不属于任何其他对象的属性和方法，最终都是它的属性和方法<br>3、在全局作用域中定义的属性和函数，都是Global对象的属性<br>4、Web浏览器将这个全局对象作为window对象的一部分加以实现，因此，在全局作用域中声明的所有变量和函数，都成为window对象的属性</p>
<blockquote>
<p>相关属性与方法详见书中131</p>
</blockquote>
<ul>
<li><h3 id="Math对象"><a href="#Math对象" class="headerlink" title="Math对象"></a>Math对象</h3></li>
</ul>
<h4 id="用法-1"><a href="#用法-1" class="headerlink" title="用法"></a>用法</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Math.属性(方法)</span><br></pre></td></tr></table></figure>
<p>为保存数学公式和信息提供了一个公共位置</p>
<blockquote>
<p>相关属性与方法详见书中134</p>
</blockquote>
<h2 id="基本包装类型（使用new操作符）"><a href="#基本包装类型（使用new操作符）" class="headerlink" title="基本包装类型（使用new操作符）"></a>基本包装类型（使用new操作符）</h2><ul>
<li><h3 id="Boolean类型"><a href="#Boolean类型" class="headerlink" title="Boolean类型"></a>Boolean类型</h3></li>
</ul>
<h4 id="用法-2"><a href="#用法-2" class="headerlink" title="用法"></a>用法</h4><p>调用Boolean构造函数并传入true或false值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var booleanObject=new Boolean(true);</span><br></pre></td></tr></table></figure>
<blockquote>
<p>相关属性与方法详见书中120</p>
</blockquote>
<ul>
<li><h3 id="Number类型"><a href="#Number类型" class="headerlink" title="Number类型"></a>Number类型</h3></li>
</ul>
<h4 id="用法-3"><a href="#用法-3" class="headerlink" title="用法"></a>用法</h4><p>调用Number构造函数时向其传递相应的数值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var numberObject=new Number(10);</span><br></pre></td></tr></table></figure>
<blockquote>
<p>相关属性与方法详见书中120</p>
</blockquote>
<ul>
<li><h3 id="String类型"><a href="#String类型" class="headerlink" title="String类型"></a>String类型</h3></li>
</ul>
<h4 id="用法-4"><a href="#用法-4" class="headerlink" title="用法"></a>用法</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var stringObject=new String(&quot;hello&quot;);</span><br></pre></td></tr></table></figure>
<blockquote>
<p>相关属性与方法详见书中122</p>
</blockquote>
<h2 id="其他引用类型（使用new操作符）"><a href="#其他引用类型（使用new操作符）" class="headerlink" title="其他引用类型（使用new操作符）"></a>其他引用类型（使用new操作符）</h2><ul>
<li><h3 id="Object类型"><a href="#Object类型" class="headerlink" title="Object类型"></a>Object类型</h3><h4 id="用法-5"><a href="#用法-5" class="headerlink" title="用法"></a>用法</h4>1、使用Object构造函数</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var person=new Object();</span><br><span class="line">person.name=&quot;greg&quot;;</span><br><span class="line">person.age=27;</span><br></pre></td></tr></table></figure>
<p>2、使用字面量表示法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var person=&#123;</span><br><span class="line">    name:&quot;greg&quot;,</span><br><span class="line">    age:27</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>相关属性与方法详见书中83</p>
</blockquote>
<ul>
<li><h3 id="Array类型"><a href="#Array类型" class="headerlink" title="Array类型"></a>Array类型</h3><h4 id="用法-6"><a href="#用法-6" class="headerlink" title="用法"></a>用法</h4>1、使用Array构造函数</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">若知道数组要保存的项目数量，可传参，为length属性的值</span><br><span class="line">var colors=new Array();</span><br><span class="line">可省略new操作符</span><br><span class="line">var colors= Array();</span><br></pre></td></tr></table></figure>
<p>2、使用数组字面量表示法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var colors=[&quot;red&quot;,&quot;yellow&quot;];</span><br><span class="line">var names=[];//空数组</span><br></pre></td></tr></table></figure>
<blockquote>
<p>相关属性与方法详见书中86</p>
</blockquote>
<ul>
<li><h3 id="Date类型"><a href="#Date类型" class="headerlink" title="Date类型"></a>Date类型</h3><h4 id="用法-7"><a href="#用法-7" class="headerlink" title="用法"></a>用法</h4></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">不传参，即获得当前日期和时间</span><br><span class="line">var now=new Date();</span><br><span class="line">传入表示某日期的毫秒数，返回该日期和时间</span><br><span class="line">其中有相应的方法可获取某日期的毫秒数Date.parse()和Date.UTC()</span><br><span class="line">var someDate=new Date(Date.parse(&quot;July 14,2017&quot;));</span><br><span class="line">等价于var someDate=new Date(&quot;July 14,2017&quot;);</span><br><span class="line">var someDate=new Date(Date.UTC(2017,6,14));</span><br><span class="line">等价于var someDate=new Date(2017,6,14);//UTC时间</span><br></pre></td></tr></table></figure>
<blockquote>
<p>相关属性与方法详见书中98</p>
</blockquote>
<ul>
<li><h3 id="RegExp类型"><a href="#RegExp类型" class="headerlink" title="RegExp类型"></a>RegExp类型</h3><h4 id="用法-8"><a href="#用法-8" class="headerlink" title="用法"></a>用法</h4>1、使用RegExp构造函数</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var pattern=new RegExp(&quot;pattern&quot;,&quot;gim&quot;);</span><br></pre></td></tr></table></figure>
<p>2、使用字面量表达式（常用）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var pattern =/pattern/gim;</span><br><span class="line">g:全局模式</span><br><span class="line">i:不区分大小写</span><br><span class="line">m:多行模式</span><br></pre></td></tr></table></figure>
<blockquote>
<p>相关元字符、实例属性、实例方法、静态属性详见书中103</p>
</blockquote>
<ul>
<li><h3 id="Function类型"><a href="#Function类型" class="headerlink" title="Function类型"></a>Function类型</h3><h4 id="用法-9"><a href="#用法-9" class="headerlink" title="用法"></a>用法</h4>1、使用函数声明语法定义（常用）</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">解析器会率先读取函数声明，并使其在执行任何代码前可用</span><br><span class="line">function sum(num1,num2)&#123;</span><br><span class="line">    return num1+num2;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>2、使用函数表达式定义</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">必须等解析器执行到函数表达式所在的代码行，才会真正被解释执行</span><br><span class="line">var sum=function(num1,num2)&#123;</span><br><span class="line">    return num1+num2;</span><br><span class="line">&#125;;</span><br><span class="line">无需函数名，通过变量即可引用函数</span><br><span class="line">PS：函数末尾有一个分号，同声明其他变量一样</span><br></pre></td></tr></table></figure>
<p>3、使用Function构造函数（不推荐使用）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var sum=new Function(&quot;num1&quot;,&quot;num2&quot;,&quot;return num1+num2&quot;);</span><br></pre></td></tr></table></figure>
<h4 id="小结-1"><a href="#小结-1" class="headerlink" title="小结"></a>小结</h4><ol>
<li>没有重载：当声明了两个同名函数时，后面的将覆盖前面的函数</li>
<li>作为值的函数：像传参一样把函数传递，即访问函数的指针，而不是执行函数  </li>
<li>内部属性：（有点绕有点难懂，我觉得很少用）<br>arguments.callee：指针，指向拥有 arguments对象的函数；arguments.callee.caller：指向（调用了（拥有arguments对象）的函数）的函数</li>
</ol>
<blockquote>
<p>相关属性与方法详见书中110</p>
</blockquote>

          
        
      
    </div>
    
    
    

    

    

    <div>
      
    </div>

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/03/事件/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Sivan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Sivan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/03/事件/" itemprop="url">事件</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-03T22:43:37+08:00">
                2018-05-03
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/红宝书/" itemprop="url" rel="index">
                    <span itemprop="name">红宝书</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  1,558 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  6 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="事件流"><a href="#事件流" class="headerlink" title="事件流"></a>事件流</h1><ul>
<li><h4 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h4>事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）</li>
<li><h4 id="事件捕获"><a href="#事件捕获" class="headerlink" title="事件捕获"></a>事件捕获</h4>不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件<br>事件捕获用意在于在事件到达预定目标之前捕获它</li>
<li><h4 id="DOM事件流"><a href="#DOM事件流" class="headerlink" title="DOM事件流"></a>DOM事件流</h4>（事件流描述的是从页面中接收事件的顺序）</li>
</ul>
<ol>
<li>事件捕获阶段（从document开始）</li>
<li>处于目标阶段</li>
<li>事件冒泡阶段</li>
</ol>
<h1 id="事件处理程序"><a href="#事件处理程序" class="headerlink" title="事件处理程序"></a>事件处理程序</h1><h3 id="HTMl事件处理程序"><a href="#HTMl事件处理程序" class="headerlink" title="HTMl事件处理程序"></a>HTMl事件处理程序</h3><p>某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定</p>
<ul>
<li>特性的值</li>
</ul>
<p>可以是能够执行的js代码</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=&quot;button&quot; value=&quot;按钮&quot; onclick=&quot;alert(&apos;Clicked&apos;)&quot;/&gt;</span><br></pre></td></tr></table></figure>
<p>也可以调用在页面其他地方定义的脚本</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;input id=&quot;btn&quot; value=&quot;click me&quot; onclick=&quot;showMessage()&quot; /&gt;</span><br><span class="line">&lt;script type=&quot;text/javascript&quot;&gt; </span><br><span class="line">　　function showMessage()&#123;</span><br><span class="line">　　 alert(&quot;clicked&quot;);</span><br><span class="line"> &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>扩展作用域</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">function()&#123;</span><br><span class="line">    with(document)&#123;</span><br><span class="line">        eith(this)&#123;</span><br><span class="line">            //元素属性值</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;        在这个函数内部，可以像访问局部变量一样访问document</span><br><span class="line">         及该元素本身的成员</span><br></pre></td></tr></table></figure>
<h3 id="DOM0级事件处理程序（主要）"><a href="#DOM0级事件处理程序（主要）" class="headerlink" title="DOM0级事件处理程序（主要）"></a>DOM0级事件处理程序（主要）</h3><p>通过JavaScript指定处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。每个元素（包括document和window）都有自己的事件处理程序属性<br>以这种方式添加的事件处理程序会在事件流的<em>冒泡阶段</em>被处理</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">var btn = document.getElementById(&quot;btn&quot;);</span><br><span class="line">btn.onclick = function()&#123;</span><br><span class="line">   alert(&quot;Clicked&quot;);       //指定事件处理程序</span><br><span class="line">&#125;;</span><br><span class="line">btn.onclick=function()&#123;</span><br><span class="line">  alert(this.id);//btn     //其作用域为元素的作用域</span><br><span class="line">&#125;</span><br><span class="line">//想要取消事件处理程序的话，只需将事件处理程序属性设为null即可</span><br><span class="line">btn.onclick = null;</span><br></pre></td></tr></table></figure>
<h3 id="DOM2级事件处理程序"><a href="#DOM2级事件处理程序" class="headerlink" title="DOM2级事件处理程序"></a>DOM2级事件处理程序</h3><p>用于处理指定和删除事件处理程序的操作：<br>addEventListener()和removeEventListener()</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">//指定事件处理程序 </span><br><span class="line">btn.addEventListener(&quot;click&quot;,fucntion()&#123;</span><br><span class="line">alert(&quot;clicked&quot;);&#125;,false);</span><br><span class="line">//取消事件处理程序</span><br><span class="line">btn.removeEventListener(&quot;click&quot;,function()&#123;</span><br><span class="line">alert(&quot;clicked&quot;);&#125;,false);//无效</span><br><span class="line">//指定和取消的参数必须完全相同才有效</span><br><span class="line">//而匿名函数是两个不同的函数，所以无效</span><br></pre></td></tr></table></figure>
<p>为了能够取消，最好函数采用函数表达式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var handler = function()&#123;</span><br><span class="line">   alert(&quot;clicked&quot;); </span><br><span class="line">&#125;;</span><br><span class="line">//添加事件处理程序</span><br><span class="line">btn.addEventListener(&quot;click&quot;,handler,false);</span><br><span class="line">//取消事件处理程序</span><br><span class="line">btn.removeEventListener(&quot;click&quot;,handler,false);//有效</span><br></pre></td></tr></table></figure>
<h3 id="IE事件处理程序"><a href="#IE事件处理程序" class="headerlink" title="IE事件处理程序"></a>IE事件处理程序</h3><p>用于处理指定和删除事件处理程序的操作：<br>attachEvent()和detachEvent() </p>
<p>IE事件处理程序与DOM事件处理程序的最大区别：<br>DOM0/2级事件处理程序的作用域是元素作用域；<br>而IE事件处理程序是全局作用域，即<em>this等于widow</em></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">var handler = function()&#123;</span><br><span class="line">   alert(&quot;clicked&quot;); </span><br><span class="line">&#125;;</span><br><span class="line">//指定事件处理程序</span><br><span class="line">btn.attachEvent(&quot;onclick&quot;,handler);</span><br><span class="line">//取消事件处理程序</span><br><span class="line">btn.detachEvent(&quot;onclick&quot;,handler);</span><br><span class="line">//取消参数必须与添加完全相同</span><br><span class="line">所以事件处理程序函数(同DOM2级事件中的分析一样)不要是匿名函数。</span><br></pre></td></tr></table></figure>
<h3 id="跨浏览器的事件处理程序"><a href="#跨浏览器的事件处理程序" class="headerlink" title="跨浏览器的事件处理程序"></a>跨浏览器的事件处理程序</h3><p>用于处理指定和删除事件处理程序的操作：<br>addHandler()和removeHandler()<br>这两个方法属于一个名叫EventUtil的对象</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var handler = function()&#123;</span><br><span class="line">            alert(&quot;Clicked&quot;);</span><br><span class="line">&#125;;</span><br><span class="line">//指定事件处理程序</span><br><span class="line">EventUtil.addHandler(btn,&quot;click&quot;,handler);</span><br><span class="line">//移除事件处理程序</span><br><span class="line">EventUtil.removeHandler(btn,&quot;click&quot;,handler);</span><br></pre></td></tr></table></figure>
<h1 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h1><p>在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息<br>所有浏览器都支持event对象，event对象会传入DOM0级，DOM2级，HTML指定的事件处理程序中，但支持的方式不同，所以也会涉及跨浏览器的部分</p>
<h3 id="DOM中的事件对象"><a href="#DOM中的事件对象" class="headerlink" title="DOM中的事件对象"></a>DOM中的事件对象</h3><blockquote>
<p>相关属性方法详见书355</p>
</blockquote>
<h4 id="两个有点难区分的属性："><a href="#两个有点难区分的属性：" class="headerlink" title="两个有点难区分的属性："></a>两个有点难区分的属性：</h4><ul>
<li>currentTarget：this对象始终是指向它的值，为其事件处理程序当前正在处理事件的那个元素</li>
<li>target：只包含事件的目标</li>
</ul>
<h3 id="IE中的事件对象"><a href="#IE中的事件对象" class="headerlink" title="IE中的事件对象"></a>IE中的事件对象</h3><blockquote>
<p>相关属性方法详见书359</p>
</blockquote>
<h3 id="跨浏览器的事件对象"><a href="#跨浏览器的事件对象" class="headerlink" title="跨浏览器的事件对象"></a>跨浏览器的事件对象</h3><p>对前面介绍到的EventUtil对象加以增强<br>添加如下方法 ，写一个通用的事件侦听函数即可</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">听说面试会问到，这样写就可以了</span><br><span class="line">var EventUtil=&#123;</span><br><span class="line">getEvent:function(event)&#123;</span><br><span class="line">    return event||window.event;</span><br><span class="line">&#125;,</span><br><span class="line">getTarget:function(event)&#123;</span><br><span class="line">    return event.target||event.srcElement;</span><br><span class="line">&#125;,</span><br><span class="line">preventDefault:function()&#123;</span><br><span class="line">    if(event.preventDefault)&#123;</span><br><span class="line">        event.preventDefault();</span><br><span class="line">    &#125;else&#123;</span><br><span class="line">        event.returnValue=false;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br><span class="line">stopPropagation:function()&#123;</span><br><span class="line">    if(event.stopPropagation)&#123;</span><br><span class="line">        event.stopPropagation();</span><br><span class="line">    &#125;else&#123;</span><br><span class="line">        event.cancelBubble=true;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br><span class="line">addHandler:function(element,type,handler)&#123;</span><br><span class="line">    if(element.addEventListener)&#123;</span><br><span class="line">        element.addEventListener(type,handler,false);</span><br><span class="line">    &#125;else if(element.attachEvent)&#123;</span><br><span class="line">        element[&quot;e&quot;+type]=function()&#123;</span><br><span class="line">            handler.call(element)</span><br><span class="line">        &#125;</span><br><span class="line">        element.attachEvent(&quot;on&quot;+type,element[&quot;e&quot;+type]);</span><br><span class="line">    &#125;else&#123;</span><br><span class="line">            element[&quot;on&quot;+type]=handler;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br><span class="line">removeHandler:function(element,type,handler)&#123;</span><br><span class="line">    if(element.removeEventListener)&#123;</span><br><span class="line">        element.removeEventListener(type,handler,false);</span><br><span class="line">    &#125;else if(element.detachEvent)&#123;</span><br><span class="line">        element.detachEvent(&quot;on&quot;+type,element[&quot;e&quot;+type]);</span><br><span class="line">        element[&quot;e&quot;+type]=null;   </span><br><span class="line">    &#125;else&#123;</span><br><span class="line">        element[&quot;on&quot;+type]=null;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h1 id="事件类型"><a href="#事件类型" class="headerlink" title="事件类型"></a>事件类型</h1><blockquote>
<p>好像没什么必要一一列出来了，详见书中362</p>
</blockquote>
<h1 id="内存和性能"><a href="#内存和性能" class="headerlink" title="内存和性能"></a>内存和性能</h1><h3 id="事件委托"><a href="#事件委托" class="headerlink" title="事件委托"></a>事件委托</h3><ul>
<li>利用冒泡的原理，把事件加到父级上，触发执行效果  </li>
<li>通俗的讲，就是这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件  </li>
<li>使用事件委托，只需在DOM树中尽量最高的层次上添加一个事件处理程序</li>
</ul>
<h3 id="移除事件处理程序"><a href="#移除事件处理程序" class="headerlink" title="移除事件处理程序"></a>移除事件处理程序</h3><ul>
<li>从文档中移除带有事件处理程序的元素时</li>
<li>卸载页面时</li>
</ul>
<h1 id="模拟事件"><a href="#模拟事件" class="headerlink" title="模拟事件"></a>模拟事件</h1><h3 id="DOM中的事件模拟"><a href="#DOM中的事件模拟" class="headerlink" title="DOM中的事件模拟"></a>DOM中的事件模拟</h3><ul>
<li>调用document.createEvent()方法创建event对象</li>
<li>初始化对象，为对象添加相关信息</li>
<li>调用dispatchEvent()方法触发事件</li>
</ul>
<h3 id="IE中的事件模拟"><a href="#IE中的事件模拟" class="headerlink" title="IE中的事件模拟"></a>IE中的事件模拟</h3><ul>
<li>调用document.createEventObject()方法创建event对象</li>
<li>初始化对象，为对象添加相关信息</li>
<li>调用fireEvent()方法触发事件</li>
</ul>

          
        
      
    </div>
    
    
    

    

    

    <div>
      
    </div>

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/03/面向对象的程序设计/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Sivan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Sivan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/03/面向对象的程序设计/" itemprop="url">面向对象的程序设计</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-03T22:43:30+08:00">
                2018-05-03
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/红宝书/" itemprop="url" rel="index">
                    <span itemprop="name">红宝书</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  1,748 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  8 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="理解对象"><a href="#理解对象" class="headerlink" title="理解对象"></a>理解对象</h1><h3 id="概念（我讲得通俗一点）"><a href="#概念（我讲得通俗一点）" class="headerlink" title="概念（我讲得通俗一点）"></a>概念（我讲得通俗一点）</h3><ul>
<li><h4 id="类：js中没有类的概念，取了一个新的名字—原型对象"><a href="#类：js中没有类的概念，取了一个新的名字—原型对象" class="headerlink" title="类：js中没有类的概念，取了一个新的名字—原型对象"></a>类：js中没有类的概念，取了一个新的名字—原型对象</h4></li>
<li><h4 id="原型对象：把猫（人、狗…）的特性提取出来，形成猫类（人类、狗类…），这个即为原型对象，代表着一类事物"><a href="#原型对象：把猫（人、狗…）的特性提取出来，形成猫类（人类、狗类…），这个即为原型对象，代表着一类事物" class="headerlink" title="原型对象：把猫（人、狗…）的特性提取出来，形成猫类（人类、狗类…），这个即为原型对象，代表着一类事物"></a>原型对象：把猫（人、狗…）的特性提取出来，形成猫类（人类、狗类…），这个即为原型对象，代表着一类事物</h4></li>
<li><h4 id="对象（实例）：猫类（人类、狗类…）中的A猫（A人、A狗…），即为对象实例，代表一个具体事物"><a href="#对象（实例）：猫类（人类、狗类…）中的A猫（A人、A狗…），即为对象实例，代表一个具体事物" class="headerlink" title="对象（实例）：猫类（人类、狗类…）中的A猫（A人、A狗…），即为对象实例，代表一个具体事物"></a>对象（实例）：猫类（人类、狗类…）中的A猫（A人、A狗…），即为对象实例，代表一个具体事物</h4></li>
</ul>
<h3 id="对象的属性类型"><a href="#对象的属性类型" class="headerlink" title="对象的属性类型"></a>对象的属性类型</h3><p>一般为基本数据类型，也可以是另外的对象</p>
<ul>
<li><h4 id="数据属性"><a href="#数据属性" class="headerlink" title="数据属性"></a>数据属性</h4></li>
<li><h4 id="访问器属性"><a href="#访问器属性" class="headerlink" title="访问器属性"></a>访问器属性</h4><blockquote>
<h5 id="其特性详见书中139，感觉不会常用"><a href="#其特性详见书中139，感觉不会常用" class="headerlink" title="其特性详见书中139，感觉不会常用"></a>其特性详见书中139，感觉不会常用</h5></blockquote>
</li>
</ul>
<h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><ol>
<li>在js中一切都是对象     </li>
<li>原型对象其实也是对象                 </li>
<li>判断一个对象实例具体是什么类型用instanceof运算符<br>（引用类型中有详讲）</li>
</ol>
<hr>
<h1 id="创建对象"><a href="#创建对象" class="headerlink" title="创建对象"></a>创建对象</h1><h3 id="工厂模式（最古老）"><a href="#工厂模式（最古老）" class="headerlink" title="工厂模式（最古老）"></a>工厂模式（最古老）</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">这是一个能够根据接受的参数来构建一个包含所有必要信息的对象的函数</span><br><span class="line">function Person(name,age)&#123;</span><br><span class="line">    var o=new Object();   //创建对象实例，但无法得知对象的类型</span><br><span class="line">    o.name=name;                 //添加属性</span><br><span class="line">    o.age=age;</span><br><span class="line">    o.sayName=function()&#123;       //添加方法</span><br><span class="line">        alert(this.name);</span><br><span class="line">    &#125;;</span><br><span class="line">    return o;                  //返回对象引用       </span><br><span class="line">&#125;</span><br><span class="line">var person1=Person(&quot;greg&quot;,27);//调用函数创建对象实例</span><br></pre></td></tr></table></figure>
<h3 id="构造函数模式"><a href="#构造函数模式" class="headerlink" title="构造函数模式"></a>构造函数模式</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">function Person(name,age)&#123;</span><br><span class="line">    this.name=name;              //实例属性</span><br><span class="line">    this.age=age;</span><br><span class="line">    this.sayName=function()&#123;  //实例方法（不同实例地址不一样）</span><br><span class="line">        alert(this.name);</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line">var person1=new Person(&quot;greg&quot;,27);</span><br></pre></td></tr></table></figure>
<h3 id="原型模式"><a href="#原型模式" class="headerlink" title="原型模式"></a>原型模式</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">function Person()&#123;  &#125;</span><br><span class="line">Person.prototype=&#123;</span><br><span class="line">    constructor:Person, //强制指向Person</span><br><span class="line">    name:&quot;greg&quot;,        //原型属性</span><br><span class="line">    friend:[&quot;blue&quot;,&quot;yellow&quot;],</span><br><span class="line">    sayName:function()&#123;  //原型方法（共享，地址一样）</span><br><span class="line">        alert(this.name);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line">var person1=new Person();</span><br><span class="line">var person2=new Person();</span><br><span class="line">person1.name=&quot;Lee&quot;;   //重写person1的名字</span><br><span class="line">alert(person1.name);  //Lee</span><br><span class="line">alert(person2.name);  //Greg</span><br><span class="line">person1.friend.push(&quot;black&quot;);</span><br><span class="line">alert(person1.friend); //blue，yellow,black</span><br><span class="line">alert(person2.friend);//blue，yellow,black</span><br></pre></td></tr></table></figure>
<p>小结：  </p>
<ol>
<li>属性的查找是先从实例中找，实例中没有该属性，便从原型中找 </li>
<li>数组friend添加了一个项，是先从person1中找数组修改，由于没找到，所以顺着原型链找到原型中的数组并修改了</li>
</ol>
<h3 id="组合使用构造函数模式和原型模式（最佳）"><a href="#组合使用构造函数模式和原型模式（最佳）" class="headerlink" title="组合使用构造函数模式和原型模式（最佳）"></a>组合使用构造函数模式和原型模式（最佳）</h3><p>构造函数模式定义实例属性<br>原型模式定义方法和原型属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function Person(name,age)&#123;</span><br><span class="line">    this.name=name;         //实例属性</span><br><span class="line">    this.age=age;</span><br><span class="line">&#125;</span><br><span class="line">Person.prototype=&#123;</span><br><span class="line">    constructor:Person,    //原型属性（共享）</span><br><span class="line">    sayName:function()&#123;    //原型方法（共享）</span><br><span class="line">        alert(this.name);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line">var person1=new Person(&quot;Greg&quot;,27);</span><br><span class="line">person1.sayName();      //&quot;Greg&quot;</span><br></pre></td></tr></table></figure>
<h3 id="动态原型模式"><a href="#动态原型模式" class="headerlink" title="动态原型模式"></a>动态原型模式</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function Person(name,age)&#123;</span><br><span class="line">    this.name=name;</span><br><span class="line">    this.age=age;</span><br><span class="line">    //仅在第一次调用时初始化</span><br><span class="line">    if(typeof this.sayName!=&quot;function&quot;)&#123;</span><br><span class="line">        person.prototype.sayName=function()&#123;</span><br><span class="line">            alert(this.name);  //将原型方法封装在构造函数中</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">var person1=new Person(&quot;Greg&quot;,27);</span><br><span class="line">person1.sayName();      //&quot;Greg&quot;</span><br></pre></td></tr></table></figure>
<h3 id="寄生构造函数模式（工厂模式-构造函数模式）"><a href="#寄生构造函数模式（工厂模式-构造函数模式）" class="headerlink" title="寄生构造函数模式（工厂模式+构造函数模式）"></a>寄生构造函数模式（工厂模式+构造函数模式）</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function Person(name,age)&#123;</span><br><span class="line">    var o=new Object();</span><br><span class="line">    o.name=name;</span><br><span class="line">    o.age=age;</span><br><span class="line">    o.sayName=function()&#123;</span><br><span class="line">        alert(this.name);</span><br><span class="line">    &#125;;</span><br><span class="line">    return o;</span><br><span class="line">&#125;</span><br><span class="line">var person1=new Person(&quot;Greg&quot;,27);</span><br><span class="line">person1.sayName();</span><br><span class="line">不能确定对象关系，不推荐使用</span><br></pre></td></tr></table></figure>
<h3 id="稳妥构造函数模式"><a href="#稳妥构造函数模式" class="headerlink" title="稳妥构造函数模式"></a>稳妥构造函数模式</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function Person(name,age)&#123;</span><br><span class="line">    var o=new Object();</span><br><span class="line">    //可以在这里定义*私有*属性和方法</span><br><span class="line">    o.sayName=function()&#123;</span><br><span class="line">    alert(name);</span><br><span class="line">    &#125;;</span><br><span class="line">    return o;</span><br><span class="line">&#125;</span><br><span class="line">var person1=Person(&quot;Greg&quot;,27);</span><br><span class="line">person1.sayName();</span><br><span class="line">不引用this，不使用new操作符</span><br><span class="line">但除了sayName()方法没有别的方法访问原始数据，安全性很高</span><br></pre></td></tr></table></figure>
<h1 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h1><h3 id="原型链继承"><a href="#原型链继承" class="headerlink" title="原型链继承"></a>原型链继承</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">function Super()&#123;</span><br><span class="line">    this.val=1;</span><br><span class="line">    this.arr=[1];</span><br><span class="line">&#125;</span><br><span class="line">Super.prototype.getSuper=function()&#123;</span><br><span class="line">    return true;                   //原型方法</span><br><span class="line">&#125;;</span><br><span class="line">function Sub()&#123;  &#125;</span><br><span class="line">//继承Super，把Super的对象实例赋给Sub的原型</span><br><span class="line">Sub.prototype=new Super(); </span><br><span class="line">var sub1=new Sub();</span><br><span class="line">var sub2=new Sub();</span><br><span class="line">var super1=new Super();</span><br><span class="line">sub1.val=2;</span><br><span class="line">alert(sub1.val);//2</span><br><span class="line">alert(sub2.val);//1</span><br><span class="line">sub1.arr.push(2);</span><br><span class="line">alert(sub1.arr);//1,2</span><br><span class="line">alert(sub2.arr);//1,2</span><br><span class="line">Sub.prototype.getSuper=function()&#123;  //重写方法</span><br><span class="line">    return false;    </span><br><span class="line">&#125;;</span><br><span class="line">alert(sub1.getSuper());//false  //调用重写后的方法</span><br><span class="line">alert(super1.getSuper());//true  //调用原来的方法</span><br></pre></td></tr></table></figure>
<p>小结：     </p>
<ol>
<li>重写方法或添加新方法需写在继承后        </li>
<li>属性查找是先从对象实例中找，没有就顺着原型链继续向上查找</li>
<li>创建子类实例时，无法向父类构造函数传参</li>
</ol>
<h3 id="借用构造函数继承"><a href="#借用构造函数继承" class="headerlink" title="借用构造函数继承"></a>借用构造函数继承</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">function Super(val)&#123;</span><br><span class="line">    this.val=val;</span><br><span class="line">    this.arr=[1];</span><br><span class="line">    this.getSuper=function()&#123;  &#125;;//方法在构造函数中，无法复用</span><br><span class="line">&#125;</span><br><span class="line">function Sub(val)&#123;</span><br><span class="line">    Super.call(this,val); //继承Super，类似于对象冒充</span><br><span class="line">&#125;</span><br><span class="line">var sub1=new Sub(1);</span><br><span class="line">var sub2=new Sub(2);</span><br><span class="line">alert(sub1.val);        //1</span><br><span class="line">alert(sub2.val);       //2</span><br><span class="line">alert(sub1.getSuper==sub2.getSuper);//false</span><br><span class="line">每个子类实例都有新的方法地址，内存要爆炸了！！！</span><br></pre></td></tr></table></figure>
<h3 id="组合继承（最常用）"><a href="#组合继承（最常用）" class="headerlink" title="组合继承（最常用）"></a>组合继承（最常用）</h3><p>原型链：对原型属性和方法的继承<br>借用构造函数：对实例属性的继承</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">function Super(val)&#123;</span><br><span class="line">    this.val=val;</span><br><span class="line">    this.arr=[1];</span><br><span class="line">&#125;</span><br><span class="line">Super.prototype.getSuper=function()&#123;</span><br><span class="line">    return true;                   //原型方法</span><br><span class="line">&#125;;</span><br><span class="line">function Sub(val)&#123;</span><br><span class="line">    Super.call(this,val);     //继承Super</span><br><span class="line">&#125;</span><br><span class="line">Sub.prototype=new Super();     //继承Super</span><br><span class="line">var sub1=new Sub(1);</span><br><span class="line">var sub2=new Sub(2);</span><br><span class="line">alert(sub1.val);        //1</span><br><span class="line">alert(sub2.val);       //2</span><br><span class="line">alert(sub1.getSuper==sub2.getSuper);//true</span><br></pre></td></tr></table></figure>
<h3 id="原型式继承（类似于对象复制）"><a href="#原型式继承（类似于对象复制）" class="headerlink" title="原型式继承（类似于对象复制）"></a>原型式继承（类似于对象复制）</h3><p>创建新对象–&gt;返回该对象–&gt;增强（添加属性/方法）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// 生孩子函数 beget：龙beget龙，凤beget凤</span><br><span class="line">//创建新的obj的对象实例</span><br><span class="line">function beget(obj)&#123;   </span><br><span class="line">    var F = function()&#123;&#125;;</span><br><span class="line">    F.prototype = obj;</span><br><span class="line">    return new F();</span><br><span class="line">&#125;</span><br><span class="line">function Super()&#123;</span><br><span class="line">    this.val = 1;</span><br><span class="line">    this.arr = [1];</span><br><span class="line">&#125;</span><br><span class="line">// 生孩子</span><br><span class="line">var sub = beget(new Super());   // 核心</span><br><span class="line">// 添加属性</span><br><span class="line">sub.attr1 = 1;</span><br><span class="line">sub.attr2 = 2;</span><br><span class="line">alert(sub.val);     // 1</span><br><span class="line">alert(sub.arr);     // 1</span><br><span class="line">alert(sub.attr1);   // 1</span><br><span class="line">不像继承？</span><br></pre></td></tr></table></figure>
<h3 id="寄生式继承"><a href="#寄生式继承" class="headerlink" title="寄生式继承"></a>寄生式继承</h3><p>创建新对象–&gt;增强–&gt;返回该对象</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">// 生孩子函数 beget：龙beget龙，凤beget凤。</span><br><span class="line">function beget(obj)&#123;   </span><br><span class="line">    var F = function()&#123;&#125;;</span><br><span class="line">    F.prototype = obj;</span><br><span class="line">    return new F();</span><br><span class="line">&#125;</span><br><span class="line">function Super()&#123;</span><br><span class="line">    this.val = 1;</span><br><span class="line">    this.arr = [1];</span><br><span class="line">&#125;</span><br><span class="line">function getSubObject(obj)&#123;</span><br><span class="line">    // 创建新对象</span><br><span class="line">    var clone = beget(obj); // 核心</span><br><span class="line">    // 添加属性</span><br><span class="line">    clone.attr1 = 1;</span><br><span class="line">    clone.attr2 = 2;</span><br><span class="line"> </span><br><span class="line">    return clone;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">var sub = getSubObject(new Super());</span><br><span class="line">alert(sub.val);     // 1</span><br><span class="line">alert(sub.arr);     // 1</span><br><span class="line">alert(sub.attr1);   // 1</span><br><span class="line">给原型式继承穿个马甲？</span><br></pre></td></tr></table></figure>
<h3 id="寄生组合式继承（最佳，但组合继承最常用）"><a href="#寄生组合式继承（最佳，但组合继承最常用）" class="headerlink" title="寄生组合式继承（最佳，但组合继承最常用）"></a>寄生组合式继承（最佳，但组合继承最常用）</h3><p>有缺陷的寄生式继承+不完美的组合继承</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">// 生孩子函数 beget：龙beget龙，凤beget凤</span><br><span class="line">//创建新的obj的对象实例</span><br><span class="line">function beget(obj)&#123;   </span><br><span class="line">    var F = function()&#123;&#125;;</span><br><span class="line">    F.prototype = obj;  </span><br><span class="line">    return new F();</span><br><span class="line">&#125;</span><br><span class="line">function Super()&#123;</span><br><span class="line">    this.val = 1;</span><br><span class="line">    this.arr = [1];</span><br><span class="line">&#125;</span><br><span class="line">//  在此处声明函数</span><br><span class="line">Super.prototype.getSuper = function()&#123;&#125;;</span><br><span class="line">function Sub()&#123;</span><br><span class="line">    Super.call(this);   // 继承</span><br><span class="line">&#125;</span><br><span class="line">//继承，把实例赋给Sub的原型</span><br><span class="line">var proto = beget(Super.prototype); </span><br><span class="line">proto.constructor = Sub;           </span><br><span class="line">Sub.prototype = proto;             </span><br><span class="line"> </span><br><span class="line">var sub = new Sub();</span><br><span class="line">alert(sub.val);  //1</span><br><span class="line">alert(sub.arr);  //1</span><br></pre></td></tr></table></figure>
<p>大总结：加油！棒棒哒！熬过这一章其余就轻松啦啦啦！已经写得尽可能详细了，多多复习！</p>

          
        
      
    </div>
    
    
    

    

    

    <div>
      
    </div>

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/03/函数表达式/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Sivan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Sivan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/03/函数表达式/" itemprop="url">函数表达式</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-03T22:35:50+08:00">
                2018-05-03
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/红宝书/" itemprop="url" rel="index">
                    <span itemprop="name">红宝书</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2,323 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  9 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="函数表达式"><a href="#函数表达式" class="headerlink" title="函数表达式"></a>函数表达式</h1><h2 id="定义函数的方式"><a href="#定义函数的方式" class="headerlink" title="定义函数的方式"></a>定义函数的方式</h2><h4 id="使用函数声明"><a href="#使用函数声明" class="headerlink" title="使用函数声明"></a>使用函数声明</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">function 函数名(参数)&#123;</span><br><span class="line">    //函数体</span><br><span class="line">&#125;</span><br><span class="line">可通过name属性访问函数名（即标识符）（有何意义？）</span><br><span class="line">alert(函数名.name);//函数名</span><br></pre></td></tr></table></figure>
<h4 id="使用函数表达式"><a href="#使用函数表达式" class="headerlink" title="使用函数表达式"></a>使用函数表达式</h4><p>这种情况下创建的函数叫匿名函数<br>顾名思义，因为 function关键字后面没有函数名（即标识符）<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var 变量=function()&#123;</span><br><span class="line">    //函数体</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<h4 id="两者的主要区别"><a href="#两者的主要区别" class="headerlink" title="两者的主要区别"></a>两者的主要区别</h4><p>（1） 函数声明无论置于调用语句前后，解析器都会先读取函数声明  </p>
<blockquote>
<p>后面不能跟圆括号</p>
</blockquote>
<p>由于函数声明的一个重要特征—<em>函数声明提升</em>（在执行代码之前会先读取函数声明）这意味着可以把函数声明放在调用它的语句后面</p>
<p>（2）函数表达式则要等到解析器执行到它所在代码行才被真正执行</p>
<blockquote>
<p>后面可以跟圆括号，表示立即自我执行</p>
</blockquote>
<p>则函数表达式需要先把函数赋值给变量，再调用函数</p>
<h1 id="递归"><a href="#递归" class="headerlink" title="递归"></a>递归</h1><h3 id="递归函数"><a href="#递归函数" class="headerlink" title="递归函数"></a>递归函数</h3><p>是在一个函数通过名字调用自身的情况下构成的</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function factorial(num)&#123;</span><br><span class="line">    if(num&lt;=1)&#123;</span><br><span class="line">        return 1;</span><br><span class="line">    &#125;else&#123;</span><br><span class="line">        return num*factorial(num-1);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>缺点：把该函数保存在另一个变量中，且将factorial变量设置为null时（即当函数名改变了时），导致错误</p>
<h3 id="改进"><a href="#改进" class="headerlink" title="改进"></a>改进</h3><p>arguments.callee是一个指向正在执行的函数的指针，通俗一点讲就是指向拥有arguments对象的函数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function factorial(num)&#123;</span><br><span class="line">    if(num&lt;=1)&#123;</span><br><span class="line">        return 1;</span><br><span class="line">    &#125;else&#123;          //arguments.callee代替函数名</span><br><span class="line">        return num*arguments.callee(num-1);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h1><h3 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h3><p>在讲述闭包之前必须先引入几个概念：<br><strong>函数的执行环境</strong>(excution context)、<strong>活动对</strong>象(call object)、<br><strong>作用域</strong>(scope)、<strong>作用域链</strong>(scope chain)<br>以函数a从定义到执行的过程为例阐述：</p>
<p>①  当<em>定义</em>函数a的时候，js解释器会将函数a的<strong>作用域链</strong>设置为定义a时a所在的“环境”，如果a是一个全局函数，则作用域链中只有全局变量对象。</p>
<p>②  当<em>执行</em>函数a的时候，a会进入相应的<strong>执行环境</strong>。  </p>
<p>③ 在创建执行环境的过程中，首先会为a添加一个scope属性，即a的<strong>作用域</strong>，其值就为第1步中作用域链。</p>
<p>④ 然后执行环境会创建一个<strong>活动对象</strong>（活动对象也是一个拥有属性的对象，但它不具有原型而且不能通过JavaScript代码直接访问）。创建完活动对象后，把活动对象添加到a的作用域链的<em>最顶端</em>。   </p>
<p>⑤下一步是在活动对象上添加一个<strong>arguments属性</strong>，它保存着调用函数a时所传递的参数。</p>
<p>⑥ 最后把<strong>所有函数a的形参和内部的函数b的引用</strong>也添加到a的活动对象上。在这一步中，完成了函数b的的定义，因此如同第3步，函数b的作用域链被设置为b所被定义的环境，即a的作用域。 </p>
<p>a的作用域链（本质上是一个指向变量对象的指针列表）包含</p>
<ul>
<li>本地活动对象：arguments属性，a的变量，函数</li>
<li>全局变量对象</li>
</ul>
<h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><ul>
<li>闭包是指有权访问另一个函数作用域中的变量的函数，通过模拟全局作用域，使局部变量变为全局变量<br>闭包就是将函数内部和函数外部连接起来的一座桥梁 </li>
</ul>
<p>创建闭包的常用方式：在一个函数内部创建另一个函数</p>
<ul>
<li>JavaScript中所有的function都是一个闭包。</li>
</ul>
<p>不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。</p>
<ul>
<li>闭包的用途</li>
</ul>
<p>1、使其可以访问其外部函数作用域中的变量<br>2、可以实现局部变量驻留在内存中从而累加<br>通常函数的作用域及其所有变量会在函数执行结束后被销毁。  </p>
<p>但由于闭包（内部函数）的作用域链包含外部函数（非全局）的活动对象。当函数返回一个闭包时，函数的作用域将会一直在内存中保存到闭包不存在为止</p>
<ul>
<li>关于this对象</li>
</ul>
<p>闭包运行时this指向window</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">var name=&quot;The window&quot;;</span><br><span class="line">var object=&#123;</span><br><span class="line">    name:&quot;The Object&quot;,</span><br><span class="line">    getNameFunc:function()&#123;</span><br><span class="line">        return function()&#123;</span><br><span class="line">            return this.name; //这里的作用域，this指向window</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line">alert(object.getNameFunc()()); //&quot;The window&quot;</span><br></pre></td></tr></table></figure>
<ol>
<li>改进1</li>
</ol>
<p>可适用对象冒充的方式使this指向object</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert(object.getNameFunc().call(object)); //对象冒充</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>改进2  </li>
</ol>
<p>访问作用域中的this/arguments对象，必须将对该对象的引用（this）保存到另一个闭包能够访问的变量中</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">var name=&quot;The window&quot;;</span><br><span class="line">var object=&#123;</span><br><span class="line">    name:&quot;The Object&quot;,</span><br><span class="line">    getNameFunc:function()&#123;</span><br><span class="line">        var that=this;  //这里的作用域，this指向object</span><br><span class="line">        return function()&#123;</span><br><span class="line">            return that.name; </span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line">alert(object.getNameFunc()()); //&quot;The Object&quot;</span><br><span class="line">不过这个不会常用，太绕了！！！</span><br><span class="line">理解思路即可</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>改进3  </li>
</ol>
<p>这不是闭包，也不算改进，只是通常是用这种来表示</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var name=&quot;The window&quot;;</span><br><span class="line">var object=&#123;</span><br><span class="line">    name:&quot;The Object&quot;,</span><br><span class="line">    getNameFunc:function()&#123;</span><br><span class="line">            return this.name; </span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line">alert(object.getNameFunc()); //&quot;The Object&quot;</span><br></pre></td></tr></table></figure>
<h1 id="模仿块级作用域"><a href="#模仿块级作用域" class="headerlink" title="模仿块级作用域"></a>模仿块级作用域</h1><p>在JavaScript中，从变量有定义开始，就可以在函数内部随处访问它，即使错误地重新声明同一个变量，也不会改变它的值，当然，重新赋值是会改变的</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">(function()&#123;</span><br><span class="line">    //这里是块级作用域</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line">JavaScript将function关键字当作一个函数声明的开始，</span><br><span class="line">而函数声明后面不能跟圆括号，给函数声明加上一对圆括</span><br><span class="line">号即转换成函数表达式，后面就可以跟圆括号了</span><br></pre></td></tr></table></figure>
<p>使用块级作用域，匿名函数中定义的任何变量，都会在执行结束时被销毁<br>这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数，能有效防止命名冲突</p>
<h1 id="私有变量"><a href="#私有变量" class="headerlink" title="私有变量"></a>私有变量</h1><p>严格来讲，JavaScript中没有私有成员的概念，所有对象属性都是公有的，不过有一个私有变量的概念<br>私有变量包括<strong>函数的参数</strong>、<strong>局部变量</strong>和<strong>在函数内部定义的其他函数</strong></p>
<ul>
<li><h3 id="特权方法"><a href="#特权方法" class="headerlink" title="特权方法"></a>特权方法</h3>有权访问私有变量的公有方法，在公共域可见，不可被修改，只能替换/删除</li>
</ul>
<blockquote>
<p>在这里提出一个问题：在函数外部私有变量不可访问，又为什么用特权方法使之可以访问呢？为什么不直接舍弃而用公有方法呢？<br>（个人理解）私有变量除了不可访问还不可修改，可隐藏那些不该被直接修改的数据，但私有变量在函数外部不可见，因此通过特权方法访问它们但也仅仅是访问而已</p>
</blockquote>
<ul>
<li><h3 id="创建特权方法的方式"><a href="#创建特权方法的方式" class="headerlink" title="创建特权方法的方式"></a>创建特权方法的方式</h3><h4 id="方法1"><a href="#方法1" class="headerlink" title="方法1"></a>方法1</h4>在构造函数中定义特权方法</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function MyObject()&#123;</span><br><span class="line">     //私有变量和私有函数</span><br><span class="line">    var privateVariable=10;       </span><br><span class="line">    function privateFunction()&#123;   </span><br><span class="line">        return true;</span><br><span class="line">    &#125;</span><br><span class="line">    //特权方法</span><br><span class="line">    this.publicMethod=function()&#123;</span><br><span class="line">        privateVariable++;</span><br><span class="line">        return privateFunction();</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="方法2"><a href="#方法2" class="headerlink" title="方法2"></a>方法2</h4><p>在私有作用域中定义私有变量和函数，通过构造函数的原型定义特权方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">(function()&#123;</span><br><span class="line">    //私有变量和私有函数</span><br><span class="line">    var privateVariable=10;       </span><br><span class="line">    function privateFunction()&#123;   </span><br><span class="line">        return true;</span><br><span class="line">    &#125;</span><br><span class="line">    //构造函数,在函数中不带var的变量为全局变量</span><br><span class="line">    MyObject=function()&#123;  &#125;;     //有点像原型模式创建对象</span><br><span class="line">    //公有/特权方法</span><br><span class="line">    MyObject.prototype.publicMethod=function()&#123;</span><br><span class="line">        privateVariable++;</span><br><span class="line">        return privateFunction();</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;)();  //匿名函数的自我执行</span><br></pre></td></tr></table></figure>
<h4 id="方法3"><a href="#方法3" class="headerlink" title="方法3"></a>方法3</h4><p>模块模式<br>前两种方法是用于以<strong>构造函数的方式</strong>创建私有变量和特权方法的<br>这种是用于以<strong>对象字面量的方式</strong>为<em>单例</em>创建私有变量和特权方法的</p>
<ul>
<li>单例：只有一个实例的对象，其实为对象字面量声明方式，永远实例化一次</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">//以对象字面量的方式创建单例对象</span><br><span class="line">var singleton=&#123;</span><br><span class="line">    name:value,</span><br><span class="line">    method:function()&#123;</span><br><span class="line">        //这里是方法的代码</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">//为单例对象添加私有变量和特权方法使其增强</span><br><span class="line">var singleton=function()&#123;</span><br><span class="line">    //私有变量和私有函数</span><br><span class="line">    var privateVariable=10;       </span><br><span class="line">    function privateFunction()&#123;   </span><br><span class="line">        return true;</span><br><span class="line">    &#125;</span><br><span class="line">    //公有/特权方法和属性</span><br><span class="line">    return&#123;</span><br><span class="line">        publicProperty:true,</span><br><span class="line">        publicMethod:function()&#123;</span><br><span class="line">            privateVariable++;</span><br><span class="line">         return privateFunction();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;();  //匿名函数的自我执行</span><br></pre></td></tr></table></figure>
<h4 id="方法4"><a href="#方法4" class="headerlink" title="方法4"></a>方法4</h4><p>增强的模块模式<br>在返回对象之前加入对其增强的代码<br>适合那些单例必须是某种类型的实例，同时还必须添加某些属性或方法对其加以增强的情况</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">var singleton=function()&#123;</span><br><span class="line">    //私有变量和私有函数</span><br><span class="line">    var privateVariable=10;       </span><br><span class="line">    function privateFunction()&#123;   </span><br><span class="line">        return true;</span><br><span class="line">    &#125;</span><br><span class="line">    //创建对象</span><br><span class="line">    var object=new CustomType();</span><br><span class="line">    //公有/特权方法和属</span><br><span class="line">        object.publicProperty:true,</span><br><span class="line">        object.publicMethod=function()&#123;</span><br><span class="line">            privateVariable++;</span><br><span class="line">         return privateFunction();</span><br><span class="line">        &#125;;</span><br><span class="line">    //返回这个对象</span><br><span class="line">    return object;</span><br><span class="line">&#125;();  //匿名函数的自我执行</span><br></pre></td></tr></table></figure>

          
        
      
    </div>
    
    
    

    

    

    <div>
      
    </div>

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/03/JSON与Ajax/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Sivan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Sivan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/03/JSON与Ajax/" itemprop="url">JSON与Ajax</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-03T22:28:25+08:00">
                2018-05-03
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/红宝书/" itemprop="url" rel="index">
                    <span itemprop="name">红宝书</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  1,086 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  5 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="JSON"><a href="#JSON" class="headerlink" title="JSON"></a>JSON</h1><h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><ul>
<li><h4 id="简单值"><a href="#简单值" class="headerlink" title="简单值"></a>简单值</h4>字符串、数值、布尔值、null，但不支持undefined<blockquote>
<p>JSON字符串必须使用<strong>双引号</strong></p>
</blockquote>
</li>
<li><h4 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h4></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">JavaScript:     var object=&#123;</span><br><span class="line">                   name:&quot;Greg&quot;,</span><br><span class="line">                   age:27</span><br><span class="line">                &#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">JSON:           &#123;</span><br><span class="line">                   &quot;name&quot;:&quot;Greg&quot;,</span><br><span class="line">                   &quot;age&quot;:27</span><br><span class="line">                &#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>1、JSON对象没有声明变量（JSON没有变量）<br>2、JSON对象没有末尾的分号 </p>
</blockquote>
<p>PS：JSON对象的属性必须加<strong>双引号</strong></p>
<ul>
<li><h4 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h4></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">JavaScript：   var values=[25,&quot;hi&quot;,true];</span><br><span class="line">JSON:          [25,&quot;hi&quot;,true]</span><br></pre></td></tr></table></figure>
<blockquote>
<p>JSON数组没有变量和分号</p>
</blockquote>
<h2 id="解析与序列化"><a href="#解析与序列化" class="headerlink" title="解析与序列化"></a>解析与序列化</h2><p>全局对象JSON有两个方法：<br><strong>stringify()</strong>  把JavaScript对象序列化成JSON字符串<br><strong>parse()</strong>  把JSON字符串解析为原生JavaScript值</p>
<h3 id="序列化选项"><a href="#序列化选项" class="headerlink" title="序列化选项"></a>序列化选项</h3><ul>
<li><h4 id="stringify-参数："><a href="#stringify-参数：" class="headerlink" title="stringify()参数："></a>stringify()参数：</h4><h5 id="第一个是过滤器"><a href="#第一个是过滤器" class="headerlink" title="第一个是过滤器"></a>第一个是过滤器</h5>数组过滤器：JSON.stringify()的结果中只包含数组中列出的属性<br>函数过滤器：函数接收属性（键）名和属性值，返回结果为相应值<h5 id="第二个是一个选项"><a href="#第二个是一个选项" class="headerlink" title="第二个是一个选项"></a>第二个是一个选项</h5>表示是否在JSON字符串中保留缩进<h5 id="第三个控制结果中的缩进和空白符"><a href="#第三个控制结果中的缩进和空白符" class="headerlink" title="第三个控制结果中的缩进和空白符"></a>第三个控制结果中的缩进和空白符</h5></li>
<li><h4 id="toJSON-方法"><a href="#toJSON-方法" class="headerlink" title="toJSON()方法"></a>toJSON()方法</h4>可以给对象定义toJSON()方法，返回其自身的JSON数据格式</li>
</ul>
<h3 id="解析选项"><a href="#解析选项" class="headerlink" title="解析选项"></a>解析选项</h3><p>JSON.parse()接收一个参数：还原函数<br>与JSON.stringify()接收的替换（过滤）函数，两者签名相同</p>
<hr>
<h2 id="JSON小结"><a href="#JSON小结" class="headerlink" title="JSON小结"></a>JSON小结</h2><ul>
<li>JSON是JavaScript的一个严格的子集，利用了JavaScript中的一些模式来表示结构化数据</li>
<li>JSON是一个轻量级的数据格式，可以简化表示复杂数据结构的工作量</li>
<li>JSON不支持变量、函数或对象实例，它就是一种表示结构化数据的格式</li>
<li>JSON<strong>字符串</strong>和JSON<strong>对象属性</strong>必须加<strong>双引号</strong></li>
</ul>
<hr>
<h1 id="Ajax"><a href="#Ajax" class="headerlink" title="Ajax"></a>Ajax</h1><p>还没学JQ，暂用原生JS   </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">兼容</span><br><span class="line">function createXHR()&#123;</span><br><span class="line">    if(typeof XMLHttpRequest !=&quot;undefined&quot;)&#123;</span><br><span class="line">        return new XMLHttpRequest();</span><br><span class="line">    &#125;else if(typeof ActiveXObject !=&quot;undefined&quot;)&#123;</span><br><span class="line">        var version=[</span><br><span class="line">        &quot;MSXML2.XMLHttp6.0&quot;,</span><br><span class="line">        &quot;MSXML2.XMLHttp3.0&quot;,</span><br><span class="line">        &quot;MSXML2.XMLHttp&quot;</span><br><span class="line">        ];</span><br><span class="line">        for(var i=0;i&lt;version.length;i++)&#123;</span><br><span class="line">            try&#123;</span><br><span class="line">                return new ActiveXObject(version[i]);</span><br><span class="line">            &#125;catch(e)&#123;</span><br><span class="line">                //跳过</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;else&#123;</span><br><span class="line">        throw new Error(&quot;您的系统浏览器不支持XHR对象!&quot;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="XMLHttpRequest"><a href="#XMLHttpRequest" class="headerlink" title="XMLHttpRequest"></a>XMLHttpRequest</h2><table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>responseText</td>
<td>作为响应主体被返回的文本</td>
</tr>
<tr>
<td>responseXML</td>
<td>……</td>
</tr>
<tr>
<td>status</td>
<td>响应HTTP状态（200为成功）</td>
</tr>
<tr>
<td>statusText</td>
<td>HTTP状态的说明</td>
</tr>
</tbody>
</table>
<ul>
<li>HTTP状态码<br>2字头：成功<br>3字头：重定向<br>4字头：请求错误<br>5、6字头：服务器错误</li>
<li>HTTP两种头部信息<br>响应头部信息：服务器返回的信息，客户端可以获取但不可以设置<br>请求头部信息：客户端发送的信息，客户端可以设置但不可以获取</li>
</ul>
<h2 id="同步与异步"><a href="#同步与异步" class="headerlink" title="同步与异步"></a>同步与异步</h2><ul>
<li><h3 id="同步"><a href="#同步" class="headerlink" title="同步"></a>同步</h3></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">addEvent(document,&quot;click&quot;,function()&#123;</span><br><span class="line">   var xhr=createXHR();</span><br><span class="line">   xhr.open(&quot;get&quot;,demo.txt,false);</span><br><span class="line">   xhr.send(null);</span><br><span class="line">   if(xhr.status==200)&#123;</span><br><span class="line">       alert(xhr.respenseText);</span><br><span class="line">   &#125;else&#123;</span><br><span class="line">       alert(&quot;获取数据错误  错误代号：&quot;+xhr.status+&quot;,错误信息：&quot;+xhr.statusText);</span><br><span class="line">   &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li><h3 id="异步"><a href="#异步" class="headerlink" title="异步"></a>异步</h3></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">addEvent(document,&quot;click&quot;,function()&#123;</span><br><span class="line">   var xhr=createXHR();</span><br><span class="line">   xhr.onreadystatechange=function()&#123;</span><br><span class="line">       if(xhr.readyState==4)&#123;</span><br><span class="line">           if(xhr.status==200)&#123;</span><br><span class="line">               alert(xhr.respenseText);</span><br><span class="line">           &#125;else&#123;</span><br><span class="line">               alert(&quot;获取数据错误  错误代号：&quot;+xhr.status+&quot;,错误信息：&quot;+xhr.statusText);</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;;</span><br><span class="line">   xhr.open(&quot;get&quot;,demo.txt,true);</span><br><span class="line">   //xhr.abort();  取消异步请求，在接收到响应之前使用</span><br><span class="line">   xhr.send(null);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="GET与POST"><a href="#GET与POST" class="headerlink" title="GET与POST"></a>GET与POST</h2><p>在Web程序上，<br>GET一般是URL提交请求，如demo.php?nme=Lee&amp;age=27<br>POST一般是Web表单提交</p>
<ul>
<li><h3 id="GET请求"><a href="#GET请求" class="headerlink" title="GET请求"></a>GET请求</h3></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">demo1.php</span><br><span class="line"></span><br><span class="line">&lt;?php</span><br><span class="line">$username = $_GET[&apos;username&apos;];</span><br><span class="line">$age = $_GET[&apos;age&apos;];</span><br><span class="line"></span><br><span class="line">echo &quot;你的名字：&#123;$username&#125;，年龄：&#123;$age&#125;&quot;;</span><br><span class="line">?&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">addEvent(document,&quot;click&quot;,function()&#123;</span><br><span class="line">   var xhr=createXHR();</span><br><span class="line">   xhr.onreadystatechange=function()&#123;</span><br><span class="line">       if(xhr.readyState==4)&#123;</span><br><span class="line">           if(xhr.status==200)&#123;</span><br><span class="line">               alert(xhr.respenseText);</span><br><span class="line">           &#125;else&#123;</span><br><span class="line">               alert(&quot;获取数据错误  错误代号：&quot;+xhr.status+&quot;,错误信息：&quot;+xhr.statusText);</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;;</span><br><span class="line">   xhr.open(&quot;get&quot;,&quot;demo1.php?username=Lee&amp;age=27&quot;,true);</span><br><span class="line">   xhr.send(null);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li><h3 id="POST请求"><a href="#POST请求" class="headerlink" title="POST请求"></a>POST请求</h3></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">demo2.php</span><br><span class="line"></span><br><span class="line">&lt;?php</span><br><span class="line">$username = $_POST[&apos;username&apos;];</span><br><span class="line">$age = $_POST[&apos;age&apos;];</span><br><span class="line"></span><br><span class="line">echo &quot;你的名字：&#123;$username&#125;，年龄：&#123;$age&#125;&quot;;</span><br><span class="line">?&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">addEvent(document,&quot;click&quot;,function()&#123;</span><br><span class="line">   var xhr=createXHR();</span><br><span class="line">   xhr.onreadystatechange=function()&#123;</span><br><span class="line">       if(xhr.readyState==4)&#123;</span><br><span class="line">           if(xhr.status==200)&#123;</span><br><span class="line">               alert(xhr.respenseText);</span><br><span class="line">           &#125;else&#123;</span><br><span class="line">               alert(&quot;获取数据错误  错误代号：&quot;+xhr.status+&quot;,错误信息：&quot;+xhr.statusText);</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br><span class="line">   &#125;;</span><br><span class="line">   //第一步：改为post</span><br><span class="line">   xhr.open(&quot;post&quot;,&quot;demo2.php&quot;,true);</span><br><span class="line">   //第三步：模拟表单提交，申明发送的数据类型</span><br><span class="line">   xhr.setRequestHeader(&apos;content-type&apos;, &apos;application/x-www-form-urlencoded&apos;);</span><br><span class="line">   //第二步：将名值对放入send()方法里</span><br><span class="line">   xhr.send(&quot;username=Lee&amp;age=27&quot;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="Ajax步骤"><a href="#Ajax步骤" class="headerlink" title="Ajax步骤"></a>Ajax步骤</h2><ol>
<li>创建对象</li>
<li>调用open()启动一个请求以备发送</li>
<li>调用send()发送请求</li>
<li>接收响应</li>
</ol>

          
        
      
    </div>
    
    
    

    

    

    <div>
      
    </div>

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/03/Hexo+Github 搭建属于自己的博客（基础）/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Sivan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Sivan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/03/Hexo+Github 搭建属于自己的博客（基础）/" itemprop="url">Hexo+Github 搭建属于自己的博客（基础）</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-03T22:27:08+08:00">
                2018-05-03
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/博客搭建/" itemprop="url" rel="index">
                    <span itemprop="name">博客搭建</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  420 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  2 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="搭建环境准备"><a href="#搭建环境准备" class="headerlink" title="搭建环境准备"></a>搭建环境准备</h1><h3 id="Node-js-的安装和准备"><a href="#Node-js-的安装和准备" class="headerlink" title="Node.js 的安装和准备"></a>Node.js 的安装和准备</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ node -v</span><br><span class="line">$ npm -v</span><br></pre></td></tr></table></figure>
<h3 id="git的安装和准备"><a href="#git的安装和准备" class="headerlink" title="git的安装和准备"></a>git的安装和准备</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ git --version</span><br></pre></td></tr></table></figure>
<h3 id="github账户的配置"><a href="#github账户的配置" class="headerlink" title="github账户的配置"></a>github账户的配置</h3><ul>
<li>github账户注册</li>
<li>创建新仓库</li>
</ul>
<p><img src="http://ww4.sinaimg.cn/large/9fe4afa0gw1faljv7hoqhj20p40fz0vo.jpg" alt="image"></p>
<p>注意：仓库名称一定为  github用户名.github.io</p>
<ul>
<li>仓库设置</li>
</ul>
<p><img src="http://ww1.sinaimg.cn/large/9fe4afa0gw1falk4end8ij20kg0cbtbl.jpg" alt="image"></p>
<p>接下来开启github pages功能 ，点击界面右侧的 Settings，你将会打开这个库的settings页面，向下拖动，直到看见GitHub Pages</p>
<p><img src="http://ww3.sinaimg.cn/large/9fe4afa0gw1falk1s5xq7j20q204kq3o.jpg" alt="image"></p>
<p><img src="http://upload-images.jianshu.io/upload_images/1244124-5e0f79282ae8140c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/500" alt="image"></p>
<h1 id="安装hexo"><a href="#安装hexo" class="headerlink" title="安装hexo"></a>安装hexo</h1><p>在任意一个地方创建文件夹hexo，进入到该目录输入：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-cli -g</span><br></pre></td></tr></table></figure>
<p>然后可能会看到一个WARN，并不会影响操作，继续输入：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo --save</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo -v</span><br></pre></td></tr></table></figure>
<h3 id="hexo的相关配置"><a href="#hexo的相关配置" class="headerlink" title="hexo的相关配置"></a>hexo的相关配置</h3><ul>
<li>初始化hexo</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo init &lt;新文件夹&gt; </span><br><span class="line">$ cd &lt;新文件夹&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>首次体验hexo</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ hexo g</span><br><span class="line">$ hexo s  //若一直无法跳转，则是端口被占用</span><br><span class="line">$ hexo server -p 5000 //改变端口号</span><br></pre></td></tr></table></figure>
<h3 id="配置Git个人信息"><a href="#配置Git个人信息" class="headerlink" title="配置Git个人信息"></a>配置Git个人信息</h3><p>如果之前已经配置好git个人信息，请跳过这一个步骤</p>
<ul>
<li>设置Git的user name和email</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ git config --global user.name &quot;yourusername&quot;</span><br><span class="line">$ git config --global user.email &quot;youremail&quot;</span><br></pre></td></tr></table></figure>
<ul>
<li>生成密钥</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$  ssh-keygen -t rsa -C &quot;youremail&quot;</span><br></pre></td></tr></table></figure>
<h3 id="配置Deployment"><a href="#配置Deployment" class="headerlink" title="配置Deployment"></a>配置Deployment</h3><p>在_config.yml文件中，找到Deployment，然后按照如下修改：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: https://github.com/yourname/yourname.github.io.git</span><br><span class="line">  branch: master</span><br></pre></td></tr></table></figure>
<h1 id="写博客、发布新文章"><a href="#写博客、发布新文章" class="headerlink" title="写博客、发布新文章"></a>写博客、发布新文章</h1><ul>
<li>新建一篇博客</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new post &quot;article title&quot;</span><br></pre></td></tr></table></figure>
<p>用MarDown编辑器打开就可以编辑文章了</p>
<ul>
<li>生成、部署</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ hexo g   // 生成</span><br><span class="line">$ hexo d   // 部署</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo d -g //在部署前先生成</span><br></pre></td></tr></table></figure>
<ul>
<li>踩坑提醒</li>
</ul>
<p>注意需要提前安装一个扩展</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>
<blockquote>
<p>如果没有执行这行命令，将会提醒</p>
</blockquote>
<pre><code>deloyer not found:git
</code></pre>
          
        
      
    </div>
    
    
    

    

    

    <div>
      
    </div>

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/03/DOM/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Sivan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Sivan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/03/DOM/" itemprop="url">DOM</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-03T22:23:56+08:00">
                2018-05-03
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/红宝书/" itemprop="url" rel="index">
                    <span itemprop="name">红宝书</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  1,076 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  4 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="节点层次"><a href="#节点层次" class="headerlink" title="节点层次"></a>节点层次</h1><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><ul>
<li>DOM可以将任何HTML或XML文档描绘成一个由多层次节点构成的结构。</li>
<li>节点之间的关系构成层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构</li>
<li>文档节点是每个文档的根节点，通过文档节点表示的元素称之为文档元素</li>
<li>文档元素是文档的最外层元素，文档中的其他元素都包含在文档元素中</li>
<li>每个文档只能有一个文档元素，在HTML页面中，文档元素始终都是<html>元素</html></li>
<li>HTML元素通过元素节点表示，特性(属性）通过特性节点表示，注释通过注释节点表示……</li>
</ul>
<hr>
<blockquote>
<p> 以下类型属性和方法的详细内容可参考红宝书，也可参考第19章DOM基础的pdf，在这里就不一一列出了</p>
</blockquote>
<h3 id="Node类型"><a href="#Node类型" class="headerlink" title="Node类型"></a>Node类型</h3><p>JavaScript中的所有节点类型都继承自Node类型</p>
<ul>
<li>节点属性（所有节点都有）</li>
</ul>
<table>
<thead>
<tr>
<th>属性</th>
<th>用途</th>
</tr>
</thead>
<tbody>
<tr>
<td>nodeName</td>
<td>获取元素的标签名</td>
</tr>
<tr>
<td>nodeValue</td>
<td>返回节点的节点值</td>
</tr>
<tr>
<td>childNodes</td>
<td>获取当前元素节点的所有子节点</td>
</tr>
<tr>
<td>firstChild</td>
<td>获取当前元素节点的第一个子节点</td>
</tr>
<tr>
<td>lastChild</td>
<td>获取当前元素节点的最后一个子节点</td>
</tr>
<tr>
<td>ownerDocument</td>
<td>获取该文档的文档根节点</td>
</tr>
<tr>
<td>parentNode</td>
<td>获取当前节点的父节点</td>
</tr>
<tr>
<td>previousSibling</td>
<td>获取当前节点的前一个同级节点</td>
</tr>
<tr>
<td>nextSibling</td>
<td>获取当前节点的后一个同级节点</td>
</tr>
</tbody>
</table>
<ul>
<li><p>childNodes属性保存着一个NodeList对象，是一种类数组对象，用于保存一组有序的节点</p>
</li>
<li><p>操作节点（所有节点都可用）</p>
</li>
</ul>
<table>
<thead>
<tr>
<th>方法</th>
<th>用途</th>
</tr>
</thead>
<tbody>
<tr>
<td>appendChild()</td>
<td>将新节点追加到子节点列表的末尾</td>
</tr>
<tr>
<td>insertBefore()</td>
<td>将新节点插入到参考节点的前面</td>
</tr>
<tr>
<td>replaceChild()</td>
<td>将新节点替换掉旧节点</td>
</tr>
<tr>
<td>removeChild()</td>
<td>移除节点</td>
</tr>
<tr>
<td>cloneNode()</td>
<td>复制节点</td>
</tr>
</tbody>
</table>
<h3 id="Document类型"><a href="#Document类型" class="headerlink" title="Document类型"></a>Document类型</h3><p>JavaScript通过Document类型表示文档</p>
<ul>
<li>查找元素</li>
</ul>
<table>
<thead>
<tr>
<th>方法</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>getElementsByTagName()</td>
<td>获取相同元素的节点列表</td>
</tr>
<tr>
<td>getElementByName()</td>
<td>获取相同名称的节点列表</td>
</tr>
<tr>
<td>getElementById()</td>
<td>获取特定id元素的节点</td>
</tr>
</tbody>
</table>
<ul>
<li>文档写入</li>
</ul>
<table>
<thead>
<tr>
<th>方法</th>
<th>用途</th>
</tr>
</thead>
<tbody>
<tr>
<td>write()</td>
<td>原样写入</td>
</tr>
<tr>
<td>writeln()</td>
<td>在字符串末尾添加换行符（\n）</td>
</tr>
<tr>
<td>open()</td>
<td>打开网页的输出流</td>
</tr>
<tr>
<td>close()</td>
<td>关闭网页的输出流</td>
</tr>
</tbody>
</table>
<h3 id="Element类型"><a href="#Element类型" class="headerlink" title="Element类型"></a>Element类型</h3><ul>
<li>在HTML中，标签名始终都以全部大写表示</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert(div.tagname);//DIV</span><br></pre></td></tr></table></figure>
<ul>
<li><p>title特性：鼠标移动到该元素之上时显示的内容</p>
</li>
<li><p>操作特性</p>
</li>
</ul>
<table>
<thead>
<tr>
<th>方法</th>
<th>用途</th>
</tr>
</thead>
<tbody>
<tr>
<td>getAttribute()</td>
<td>获取特定元素节点属性的值</td>
</tr>
<tr>
<td>setAttribute()</td>
<td>设置特定元素节点属性的值</td>
</tr>
<tr>
<td>removeAttribute()</td>
<td>移除特定元素节点属性</td>
</tr>
</tbody>
</table>
<ul>
<li><p>attributes属性<br>Element类型是使用attributes属性的唯一一个DOM节点类型。<br>attributes属性中包含一个NameNodeMap，是一个“动态”的集合，里面每一项为元素的特性</p>
</li>
<li><p>创建元素</p>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">document.createElement(要创建元素的标签名);</span><br></pre></td></tr></table></figure>
<p>创建的新元素尚未被添加在文档树中，因此浏览器无法显示<br>可以用appendChild()等方法把其添加到文档树中</p>
<h3 id="Text类型"><a href="#Text类型" class="headerlink" title="Text类型"></a>Text类型</h3><p>文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容</p>
<ul>
<li>创建文本节点</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">document.createTextNode(要插入节点中的文本);</span><br></pre></td></tr></table></figure>
<p>同样，除非把新节点添加到文档树中已经存在的节点中，否则不会在浏览器看到新节点</p>
<ul>
<li>规范文本节点<br>normalize()   将所有文本节点合并成一个节点</li>
<li>分割文本节点<br>splitText()将一个文本节点分为两个文本节点</li>
</ul>
<h3 id="Comment类型"><a href="#Comment类型" class="headerlink" title="Comment类型"></a>Comment类型</h3><p>表示注释</p>
<h3 id="CDATASection类型"><a href="#CDATASection类型" class="headerlink" title="CDATASection类型"></a>CDATASection类型</h3><p>表示CDATA区域，只针对基于XML的文档</p>
<h3 id="DocumentType类型"><a href="#DocumentType类型" class="headerlink" title="DocumentType类型"></a>DocumentType类型</h3><p>包含着与文档的doctype有关的所有信息，不常用</p>
<h3 id="DocumentFragment类型"><a href="#DocumentFragment类型" class="headerlink" title="DocumentFragment类型"></a>DocumentFragment类型</h3><p>表示文档片段</p>
<h3 id="Attr类型"><a href="#Attr类型" class="headerlink" title="Attr类型"></a>Attr类型</h3><p>表示元素的特性</p>
<h1 id="DOM操作技术"><a href="#DOM操作技术" class="headerlink" title="DOM操作技术"></a>DOM操作技术</h1><p>以下两种技术均建议插入外部文件</p>
<h3 id="动态脚本"><a href="#动态脚本" class="headerlink" title="动态脚本"></a>动态脚本</h3><ul>
<li>使用script元素包含js代码直接插入head元素中</li>
<li>插入外部文件（建议）<br>可添加到head元素中，也可添加到页面中</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;scripr type=&quot;text/javascript&quot; src=&quot;URL&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="动态样式"><a href="#动态样式" class="headerlink" title="动态样式"></a>动态样式</h3><ul>
<li>使用style元素包含指定嵌入的样式插入head元素中</li>
<li>插入外部文件（建议）<br><strong>必须将link元素添加到head元素中</strong></li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;URL&quot;/&gt;</span><br></pre></td></tr></table></figure>

          
        
      
    </div>
    
    
    

    

    

    <div>
      
    </div>

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/05/03/前端学习路线规划/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Sivan">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Sivan">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2018/05/03/前端学习路线规划/" itemprop="url">前端学习路线规划</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-03T21:47:18+08:00">
                2018-05-03
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/前端/" itemprop="url" rel="index">
                    <span itemprop="name">前端</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2,472 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  9 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="前端学习路线规划"><a href="#前端学习路线规划" class="headerlink" title="前端学习路线规划"></a>前端学习路线规划</h1><h2 id="一、代码编写工具"><a href="#一、代码编写工具" class="headerlink" title="一、代码编写工具"></a>一、代码编写工具</h2><h3 id="sublime-Text-3"><a href="#sublime-Text-3" class="headerlink" title="sublime Text 3:"></a><strong>sublime Text 3</strong>:</h3><ol>
<li><p>sublime text编辑器单从界面看非常简洁，可以说让人一见倾心的感觉。完全符合码农的口味~~。功能上也不复杂，就跟记事本似的，很容易上手。</p>
</li>
<li><p>可以自由扩展，sublime提供了安装插件的方式，可以任意安装你想要的插件.</p>
</li>
</ol>
<h2 id="二、学习路线规划"><a href="#二、学习路线规划" class="headerlink" title="二、学习路线规划"></a>二、学习路线规划</h2><h3 id="1-熟练使用-HTML、CSS"><a href="#1-熟练使用-HTML、CSS" class="headerlink" title="1.  熟练使用 HTML、CSS"></a>1.  熟练使用 HTML、CSS</h3><p>HTML 是标签语言，可以构建前端页面的骨架；CSS是层叠样式控制表，可以构建前端页面的外貌</p>
<p>这部分比较简单，到网上搜资料，书籍视频非常多。css中盒子模型，流动，block，inline，层叠，样式优先级等这些比较重要。最后再深入了解下浏览器差异性，ie9以下兼容简单了解就行了，ie9以下浏览器被淘汰掉是趋势，低版本没必要浪费大量时间去学习兼容主流浏览器，google chrome浏览器、firefox浏览器、safari浏览器、opera浏览器即可。浏览器差异内容很多，建议在实践中多多积累。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">推荐书籍：《Head First HTML 与 CSS (第2版)》</span><br><span class="line">          《CSS 禅意花园(修订版)》</span><br></pre></td></tr></table></figure>
<h3 id="2-javascript部分（最重要的部分）"><a href="#2-javascript部分（最重要的部分）" class="headerlink" title="2.javascript部分（最重要的部分）"></a>2.javascript部分（最重要的部分）</h3><p>难点，也是重点，要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，有很多比较抽象的概念，必须要深入理解，比如闭包、原型、面向对象、封装等，要理解透彻。看书是必不可少的，找一本优秀的js书从头到尾深入学习了。另外，js面向对象编程必须要学习，非常重要，个人推荐一本书《javascript高级程序设计》。边学边练，实践出真知。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">推荐教程：网易云课堂上 李炎恢老师的视频，讲得很详细，讲的是和那本红宝书一样的内容</span><br><span class="line">          多动手写demo</span><br><span class="line">推荐书籍：《Javascript 权威指南》</span><br><span class="line">         《JavaScript 高级程序设计(第3版)》</span><br></pre></td></tr></table></figure>
<h3 id="3-jQuery学习（这不是一个框架，是一个类库）"><a href="#3-jQuery学习（这不是一个框架，是一个类库）" class="headerlink" title="3.jQuery学习（这不是一个框架，是一个类库）"></a>3.jQuery学习（这不是一个框架，是一个类库）</h3><p>这些基础知识掌握好之后，还需要学jQuery，这是一个非常优秀的Javascript库，大型开发必备。它简化了Javascript的复杂操作，消除了Javascript跨平台兼容问题，提供了大量实用方法，有良好的文档和帮助手册，是一个非常成熟的Javascript库。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">推荐教程：网易云课堂上 李炎恢老师的视频，多动手写demo</span><br><span class="line">推荐书籍：《锋利的jquery》</span><br></pre></td></tr></table></figure>
<h3 id="4-ajax的学习"><a href="#4-ajax的学习" class="headerlink" title="4.ajax的学习"></a>4.ajax的学习</h3><p>通过在后台与服务器进行数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，ajax是现在前端后台交互的主要方式。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">掌握的知识点：js原生的发送ajax的方法</span><br><span class="line">             jq的简便的发送ajax的方法</span><br></pre></td></tr></table></figure>
<h3 id="5-git"><a href="#5-git" class="headerlink" title="5.git"></a>5.git</h3><p>Git是目前世界上最先进的分布式版本控制系统，适合于在团队合作时进行版本控制，提高开发效率</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">推荐教程：廖雪峰老师的关于git的教程博客</span><br></pre></td></tr></table></figure>
<h3 id="6-理解前端语言新标准-HTML5、CSS3、ES6-及其特性"><a href="#6-理解前端语言新标准-HTML5、CSS3、ES6-及其特性" class="headerlink" title="6.理解前端语言新标准 HTML5、CSS3、ES6 及其特性"></a>6.理解前端语言新标准 HTML5、CSS3、ES6 及其特性</h3><p>熟练使用 HTML、CSS、JavaScript 还需要我们理解其语言最新相关标准：HTML5、CSS3 和 ES6(ECMAScript6)。</p>
<ul>
<li>HTML 5 里新增了许多特性：语义化和新的音频、视频支持等；</li>
<li>CSS 3 被划分为模块，解决了 CSS2 为等待各个标准统一而耗费大量时间才能推进的不足之处，同时也提供了 2D、3D、动画效果等新特性；</li>
<li>ECMAScript6 等于 JavaScript - DOM - BOM，是 JavaScript 在 2015 年的最新标准，因为 ES6 对标准改动较大，前端开发者常常将一个前端项目是否支持 ES6 作为推进前端新技术的重要桥梁之一。ES6 将箭头函数、let 变量声明命令、Promise 编程、模块化编程等新特性纳入其标准中，得到了各大浏览器最新版本的支持。</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">扩展阅读：《ES6 标准入门(第2版)》</span><br><span class="line">          《深入理解ES6》</span><br></pre></td></tr></table></figure>
<h3 id="7-掌握浏览器兼容、响应式布局相关解决方案"><a href="#7-掌握浏览器兼容、响应式布局相关解决方案" class="headerlink" title="7.掌握浏览器兼容、响应式布局相关解决方案"></a>7.掌握浏览器兼容、响应式布局相关解决方案</h3><p>早期占据浏览器半壁江山的IE浏览器上存在的众多浏览器兼容问题，耗费了当时前端开发者的大量开发时间。虽然说现在的前端开发者已经不需要考虑太多的浏览器兼容问题，对其概念的了解有利于了解前端历史包袱或在未来足以应对一些面向特殊群体(早期 IE 浏览器使用者)的前端项目。<br><strong>关于IE浏览器的兼容性问题在李炎恢老师的那个视频有详细的讲解</strong></p>
<p>响应式布局和单页面应用是当代前端开发者的必备技能。从 Web Pages 到 Web App 时代，我们开发的前端项目有越来越多的可能需要同时在电脑端和手机端进行访问，一个有良好响应式布局的前端项目可以一个代码运行在多种不同分辨率的平台之上。</p>
<h2 id="三、现在前端主流的框架"><a href="#三、现在前端主流的框架" class="headerlink" title="三、现在前端主流的框架"></a>三、现在前端主流的框架</h2><h3 id="1-vuejs-2016年最火的前端框架（MVVC框架）"><a href="#1-vuejs-2016年最火的前端框架（MVVC框架）" class="headerlink" title="1. vuejs :2016年最火的前端框架（MVVC框架）"></a>1. vuejs :2016年最火的前端框架（MVVC框架）</h3><p>是一套用于构建用户界面的渐进式框架Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
<p><strong>常用于单页面应用的开发</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">掌握的要点：(vue全家桶)</span><br><span class="line">   1.vue-router</span><br><span class="line">   2.vuex</span><br><span class="line">   3.vue-resource</span><br><span class="line">   4.vue-cli</span><br><span class="line">   5.Element-ui</span><br><span class="line">   </span><br><span class="line">推荐教程：详细阅读官网教程，中国人自己研发的，有中文版，不难</span><br></pre></td></tr></table></figure>
<h3 id="2-Reactjs"><a href="#2-Reactjs" class="headerlink" title="2. Reactjs"></a>2. Reactjs</h3><p>React 是一个用于构建用户界面的 javascript 库。</p>
<p>React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。</p>
<p>React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。</p>
<p>React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。</p>
<p><strong>React特点：</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1.声明式设计 −React采用声明范式，可以轻松描述应用。</span><br><span class="line">2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。</span><br><span class="line">3.灵活 −React可以与已知的库或框架很好地配合。</span><br><span class="line">4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。</span><br><span class="line">5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。</span><br><span class="line">6.单向响应的数据流 − React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">掌握的知识点：（React全家桶技术）</span><br><span class="line">  1.Reactjs</span><br><span class="line">  2.React生命周期</span><br><span class="line">  3.React Router</span><br><span class="line">  4.Redux</span><br><span class="line">  5.React Native(主要用于移动端的开发)</span><br></pre></td></tr></table></figure>
<h2 id="3-AngularJS（国外开发大型项目常用框架）"><a href="#3-AngularJS（国外开发大型项目常用框架）" class="headerlink" title="3.AngularJS（国外开发大型项目常用框架）"></a>3.AngularJS（国外开发大型项目常用框架）</h2><p>AngularJS的四大功能：</p>
<ol>
<li><p>MVC</p>
<p>将后台的MVC模式写入了前端语言中。我总觉得前端语言将来会很叼，从node.js开始我就又一种这样的感觉。可能在很久之后取代后端语言不是没有可能的。</p>
<ol start="2">
<li>模块化</li>
</ol>
<p>就是一系列函数的集合，当应用被启动时，这些函数就会被执行。主要利用angular.module来定义模块。也是Angular.js的亮点。</p>
</li>
<li><p>指令属性</p>
</li>
</ol>
<p>我自己的理解就是比html标签更加具有属性和方法的指令标签</p>
<ol start="4">
<li>双向数据绑定</li>
</ol>
<p>传统的数据绑定是单向绑定，数据只能从model和controller生成需要的html，但是不能返过来使用。只是单方向的。双向数据绑定:也就是说我在前面填写，后面直接生成代码，将填写的显示出来。双向的意思就是如果view修改了属性值，那么model机会看到这个改变。相反也是一样的。</p>
<h2 id="4-小程序（类似一个前端开发框架）"><a href="#4-小程序（类似一个前端开发框架）" class="headerlink" title="4. 小程序（类似一个前端开发框架）"></a>4. 小程序（类似一个前端开发框架）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">推荐教程：官网上的小程序开发文档，尝试动手写一下小程序</span><br></pre></td></tr></table></figure>
<h2 id="5-nodejs-前端用来写后台的工具"><a href="#5-nodejs-前端用来写后台的工具" class="headerlink" title="5.nodejs(前端用来写后台的工具)"></a>5.nodejs(前端用来写后台的工具)</h2><p>简单的说 Node.js 就是运行在服务端的 JavaScript。</p>
<p>Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。</p>
<p>Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">推荐教程：官网的教程</span><br></pre></td></tr></table></figure></p>
<h2 id="四、一些常用的ui框架"><a href="#四、一些常用的ui框架" class="headerlink" title="四、一些常用的ui框架"></a>四、一些常用的ui框架</h2><h4 id="1-Bootstrape：最好的响应式css框架"><a href="#1-Bootstrape：最好的响应式css框架" class="headerlink" title="1. Bootstrape：最好的响应式css框架"></a>1. Bootstrape：最好的响应式css框架</h4><h4 id="2-Element-ui：完美适应vuejs的ui框架"><a href="#2-Element-ui：完美适应vuejs的ui框架" class="headerlink" title="2. Element-ui：完美适应vuejs的ui框架"></a>2. Element-ui：完美适应vuejs的ui框架</h4><h4 id="3-Amazeui：Amaze-UI-是一个轻量级、-Mobile-first-的前端框架-基于开源社区流行前端框架编写的。"><a href="#3-Amazeui：Amaze-UI-是一个轻量级、-Mobile-first-的前端框架-基于开源社区流行前端框架编写的。" class="headerlink" title="3. Amazeui：Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。"></a>3. Amazeui：Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。</h4><h4 id="4-Aliceui"><a href="#4-Aliceui" class="headerlink" title="4. Aliceui"></a>4. Aliceui</h4><h4 id="5-Echart：最好的图表制作框架"><a href="#5-Echart：最好的图表制作框架" class="headerlink" title="5.Echart：最好的图表制作框架"></a>5.Echart：最好的图表制作框架</h4><h4 id="·····"><a href="#·····" class="headerlink" title="·····"></a>·····</h4><h2 id="六、前端最好掌握的一些常用技能"><a href="#六、前端最好掌握的一些常用技能" class="headerlink" title="六、前端最好掌握的一些常用技能"></a>六、前端最好掌握的一些常用技能</h2><ol>
<li>Markdown笔记的使用，程序员专用笔记本</li>
<li>github的使用：全球最大的开源代码网站，在上面你可以找到全世界所有出名项目的源代码，被称为人类的知识宝库。</li>
<li>用github page搭建个人博客，上传个人项目到github上，面试加分必备项</li>
<li>移动端的开发</li>
<li><p>前端web开发命名规范，谷歌、百度命名标准</p>
<p>等等·······</p>
</li>
</ol>

          
        
      
    </div>
    
    
    

    

    

    <div>
      
    </div>

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
  </section>

  
  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview-wrap sidebar-panel sidebar-panel-active">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="/images/avatar.jpg"
                alt="Sivan" />
            
              <p class="site-author-name" itemprop="name">Sivan</p>
              <p class="site-description motion-element" itemprop="description">I will be strong enough to make you feel bad</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">14</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">8</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">8</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/SivanWong" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://twitter.com/yourname" target="_blank" title="Twitter">
                      
                        <i class="fa fa-fw fa-twitter"></i>Twitter</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="http://weibo.com/your-user-name" target="_blank" title="微博">
                      
                        <i class="fa fa-fw fa-weibo"></i>微博</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; 2017 &mdash; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Sivan
  </span>

  
</div>


  <!-- <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div> -->
  <div class="powered-by">
  <i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
    本站访客数:<span id="busuanzi_value_site_uv"></span>
  </span>
  </div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  

  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    var path = "/" + search_path;
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').hide();
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.search-popup-overlay').click(onPopupClose);
      $('.popup').toggle();
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';

      // start loading animation
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay">' +
          '<div id="search-loading-icon">' +
          '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
          '</div>' +
          '</div>')
        .css('overflow', 'hidden');
      $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');

      $.ajax({
        url: path,
        dataType: isXml ? "xml" : "json",
        async: true,
        success: function(res) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = isXml ? $("entry", res).map(function() {
            return {
              title: $("title", this).text(),
              content: $("content",this).text(),
              url: $("url" , this).text()
            };
          }).get() : res;
          var input = document.getElementById(search_id);
          var resultContent = document.getElementById(content_id);
          var inputEventFunction = function() {
            var searchText = input.value.trim().toLowerCase();
            var keywords = searchText.split(/[\s\-]+/);
            if (keywords.length > 1) {
              keywords.push(searchText);
            }
            var resultItems = [];
            if (searchText.length > 0) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var hitCount = 0;
                var searchTextCount = 0;
                var title = data.title.trim();
                var titleInLowerCase = title.toLowerCase();
                var content = data.content.trim().replace(/<[^>]+>/g,"");
                var contentInLowerCase = content.toLowerCase();
                var articleUrl = decodeURIComponent(data.url);
                var indexOfTitle = [];
                var indexOfContent = [];
                // only match articles with not empty titles
                if(title != '') {
                  keywords.forEach(function(keyword) {
                    function getIndexByWord(word, text, caseSensitive) {
                      var wordLen = word.length;
                      if (wordLen === 0) {
                        return [];
                      }
                      var startPosition = 0, position = [], index = [];
                      if (!caseSensitive) {
                        text = text.toLowerCase();
                        word = word.toLowerCase();
                      }
                      while ((position = text.indexOf(word, startPosition)) > -1) {
                        index.push({position: position, word: word});
                        startPosition = position + wordLen;
                      }
                      return index;
                    }

                    indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
                    indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
                  });
                  if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
                    isMatch = true;
                    hitCount = indexOfTitle.length + indexOfContent.length;
                  }
                }

                // show search results

                if (isMatch) {
                  // sort index by position of keyword

                  [indexOfTitle, indexOfContent].forEach(function (index) {
                    index.sort(function (itemLeft, itemRight) {
                      if (itemRight.position !== itemLeft.position) {
                        return itemRight.position - itemLeft.position;
                      } else {
                        return itemLeft.word.length - itemRight.word.length;
                      }
                    });
                  });

                  // merge hits into slices

                  function mergeIntoSlice(text, start, end, index) {
                    var item = index[index.length - 1];
                    var position = item.position;
                    var word = item.word;
                    var hits = [];
                    var searchTextCountInSlice = 0;
                    while (position + word.length <= end && index.length != 0) {
                      if (word === searchText) {
                        searchTextCountInSlice++;
                      }
                      hits.push({position: position, length: word.length});
                      var wordEnd = position + word.length;

                      // move to next position of hit

                      index.pop();
                      while (index.length != 0) {
                        item = index[index.length - 1];
                        position = item.position;
                        word = item.word;
                        if (wordEnd > position) {
                          index.pop();
                        } else {
                          break;
                        }
                      }
                    }
                    searchTextCount += searchTextCountInSlice;
                    return {
                      hits: hits,
                      start: start,
                      end: end,
                      searchTextCount: searchTextCountInSlice
                    };
                  }

                  var slicesOfTitle = [];
                  if (indexOfTitle.length != 0) {
                    slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
                  }

                  var slicesOfContent = [];
                  while (indexOfContent.length != 0) {
                    var item = indexOfContent[indexOfContent.length - 1];
                    var position = item.position;
                    var word = item.word;
                    // cut out 100 characters
                    var start = position - 20;
                    var end = position + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if (end < position + word.length) {
                      end = position + word.length;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
                  }

                  // sort slices in content by search text's count and hits' count

                  slicesOfContent.sort(function (sliceLeft, sliceRight) {
                    if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                      return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                    } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                      return sliceRight.hits.length - sliceLeft.hits.length;
                    } else {
                      return sliceLeft.start - sliceRight.start;
                    }
                  });

                  // select top N slices in content

                  var upperBound = parseInt('1');
                  if (upperBound >= 0) {
                    slicesOfContent = slicesOfContent.slice(0, upperBound);
                  }

                  // highlight title and content

                  function highlightKeyword(text, slice) {
                    var result = '';
                    var prevEnd = slice.start;
                    slice.hits.forEach(function (hit) {
                      result += text.substring(prevEnd, hit.position);
                      var end = hit.position + hit.length;
                      result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                      prevEnd = end;
                    });
                    result += text.substring(prevEnd, slice.end);
                    return result;
                  }

                  var resultItem = '';

                  if (slicesOfTitle.length != 0) {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
                  } else {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
                  }

                  slicesOfContent.forEach(function (slice) {
                    resultItem += "<a href='" + articleUrl + "'>" +
                      "<p class=\"search-result\">" + highlightKeyword(content, slice) +
                      "...</p>" + "</a>";
                  });

                  resultItem += "</li>";
                  resultItems.push({
                    item: resultItem,
                    searchTextCount: searchTextCount,
                    hitCount: hitCount,
                    id: resultItems.length
                  });
                }
              })
            };
            if (keywords.length === 1 && keywords[0] === "") {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
            } else if (resultItems.length === 0) {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
            } else {
              resultItems.sort(function (resultLeft, resultRight) {
                if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
                  return resultRight.searchTextCount - resultLeft.searchTextCount;
                } else if (resultLeft.hitCount !== resultRight.hitCount) {
                  return resultRight.hitCount - resultLeft.hitCount;
                } else {
                  return resultRight.id - resultLeft.id;
                }
              });
              var searchResultList = '<ul class=\"search-result-list\">';
              resultItems.forEach(function (result) {
                searchResultList += result.item;
              })
              searchResultList += "</ul>";
              resultContent.innerHTML = searchResultList;
            }
          }

          if ('auto' === 'auto') {
            input.addEventListener('input', inputEventFunction);
          } else {
            $('.search-icon').click(inputEventFunction);
            input.addEventListener('keypress', function (event) {
              if (event.keyCode === 13) {
                inputEventFunction();
              }
            });
          }

          // remove loading animation
          $(".local-search-pop-overlay").remove();
          $('body').css('overflow', '');

          proceedsearch();
        }
      });
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>





  

  

  

  
  

  

  

  

</body>
</html>
<script src="/js/src/love.js" type="text/javascript"></script>